Use Lightning Component in Visualforce Page

How to use Lightning Out to surface Lightning Component on 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.


Related posts

10 thoughts on “Use Lightning Component in Visualforce Page”

  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.

Leave a Reply