Use Lightning Component in Visualforce Page

Use Lightning Components in Visualforce Pages
Use Lightning Components in Visualforce Pages

In all of my projects currently, I have stopped creating Visualforce code. well, thats partially correct ;). I still need Visualforce page because most my clients are still on classic / Aloha Salesforce. However, If you have noticed, all Salesforce release notes, talks, webinars, Dreamforce focuses on Lightning experience. And I can say with confidence that Lightning is really really very cool. Sky is limit to your imagination, You can unleash hidden talent within you. Well, all talk talk… and you may be thinking, how can I start with Lightning Component? My client don’t even want to move away from classic. Its lots of work and money for them.

Well, here is an Idea what I am doing. I still uses Salesforce classic, still uses Visualforce but behind the scene, magic… tadaaa , Lightning Component. I will show walk you through this, how its being done.

We will use existing Flipcard Lightning Component to display on Visualforce page. Once Lightning Component is created, we need to create a Lightning Application to act an as a container.

<aura:application access="GLOBAL" extends="ltng:outApp">
	<aura:dependency resource="c:FlipCard"/>

In above Lightning Application, we have used access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on Visualforce page.

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.

Next step is to create a Visualforce page where we want to display Lightning Component.


<apex:page >
 <apex:includeLightning />

 <div style="width:30%;height:100px;" id="FlipcardContainer" />

 $Lightning.use("c:LightningOutContainerApp", function() {
 borderColor : "#16325c", 
 bgColor : "#16325c" ,
 fontColor : "#FFF",
 frontText : "What's cool about Lightning Component Development",
 backText : "You dont need to enable Lightning experience, It will work on Classic Instance as well"
 function(cmp) {
 console.log('Component created, do something cool here');

In above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

$Lightning.use() method in JavaScript is used to refer Lightning Application which extends ltng:outApp$Lightning.createComponent is used to create Lightning Component dynamically.

We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.



  1. Great usage, I am trying to pass a Parameter like SessionId taking it from the VF Page, like {!Api.SessionId} and then using it in Lightning Controller , can I do that ?

  2. Great post while using this , Lightning force:hasRecordId stops working, Record Id starts coming null, is there any work around of getting RecordId from visualforce page without having any apex controller ?

  3. Hello Jitendra,

    When I open lightning component in VF page, the look and feel is classic and not as lightning. How can I display as Lightning experience?

    Mohan Babu

  4. Hello Jitendra,
    I am very new to Salesforce and started my career last 3 months back
    I need some help,
    I have a java script button (create Opportunity) on a custom object which direct to a visualforce page that create a new opportunity with pre filled details now we are planing to have the same with lightning Experience,
    pls help me

    Thank you,

  5. Hi Jitendra,
    I have a page with some url parameter, can i pass this in in the component.
    if so can you tell me how.

  6. Hi Jitendra,

    Its a very nice blog. I have a question regarding the same. I am unable to pass the List of Ids of selected campaigns from a list button to attribute of a component which is of list type.

    $Lightning.use(“c:CampaignDedupApp”, function() {

    CampId : “{!selected}”


    Component code :-

    output of aura iterate is below:-


    I am unable to get Id as a single element.

  7. The component opens as a subtab/Tab in console. Is there a away to close it. workspace API in lightning doesn’t work

  8. Hi, I have one question: What If I wanted to add more than one component to the visualforce page? which will be the way to accomplish this?

    1. @Rodrigo, You just call the “createComponent” javascript call multiple times. If you want it in a different section of the page, then you would change the first parameter of the createComponent call, specifying a different container id.

  9. Hi Jitendra,

    I have Lightning App to use in my VF Page. My App name is myLightningApp

    After that I have used the same in my VF Page

    $Lightning.use(“c:myLightningApp”, function()
    “namespace:Managed Package Component”,
    console.log(‘… Component created successfully’);
    // Hide the Fixed Header Element

    This is working perfectly fine for the internal users. but when I try to access the VF Page using external users (Community Users) the Lightning Component is not loading. lightning Spinner kips loading to infinite time

    How can I solve the issue? Need your guidance here

  10. When using this solution in lightning consle, is there any workaround/ solution to use workspace api? Using lightning component inside vf page because list view buttons are not able to open lightning components directly.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.