How To Display Lightning Component In Visualforce Page

How To Display Lightning Component In Visualforce Page-Sample

Lightning Component

Hi Guys, Today in this post we are going to learn on, How to Use or Display Lightning Components in a Visualforce Page. Lightning Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning components into almost any web page.  Although there is some limitation with using lightning components in visualforce. we will talk about it later in this post.
So In this post we are created a Simple Lightning Component, a Lightning Application Component and a Visualforce page to display Lightning Application which have contains lightning component

Step 1 : Create Lightning Component [ LcForVf.cmp ]
  • For this sample post we are just create a very basic lightning component with some HTML and aura attributes.
  • In this lightning component we are using 3 aura:attributes, which is set/pass from visualforce page while creating lightning component.

To create Lightning Component From developer console >> file >> new >> Lightning Component

<aura:component >
  <!--declare aura attributes-->	
    <aura:attribute name="accId" type="string"/>
    <aura:attribute name="textColor" type="string" default="black"/>
    <aura:attribute name="currentUserName" type="string"/>
    <h2 style="{!'color:' + v.textColor}"> RecordId Pass With Vf Page URL Parameter : <b>{!v.accId}</b></h2>
    <p><span class="slds-badge">LogIn User :<b>{!v.currentUserName}</b></span></p>
    <button class="slds-button slds-button_brand" onclick="{!c.showAlert}">Show Alert</button>
  • Lightning component client side JavaScript controller for display alert massage on click on the ‘Show Alert’ button
   showAlert : function(component, event, helper) {
     alert('Test Alert');
Step 2 : Create Lightning Application [ ]
  • We can not display lightning components directly to visualforce page, We have need to create a Lightning Application first with ‘ltng:outApp’ Interface and make it GLOBAL* accessible .
  • The app uses the <aura:dependency> tag to indicate that it uses the Custom Lightning component. which we have created in step 1.

To create Lightning Application From developer console >> file >> new >> Lightning Application

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:LcForVf"/>
ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System. If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.
Step 3 : Create Visualforce Page [ vfPageWithLC.vfp ]
  • For use lightning components in vf page we have need to first add <apex:includeLightning> tag in Vf page which is basically JavaScript library for add the Lightning Components for Visualforce.
  • Next we have need to create a html <div> tag with specific Id, In this div we will display our lightning component using JavaScript.
  • Below is the Syntax for reference your  Lightning Application  in VF page using JavaScript. 
$Lightning.use("orgNamespace:VFApp", function() {});

where orgNamespace is the namespace prefix for the app. That is, either your org’s namespace, or the namespace of the managed package that provides the app.

<apex:page >
    <apex:includeLightning />
    <div id="LcDisplayId"></div> 
      // Here 'VfApp' Is Lightning Application Name
    $Lightning.use("c:VfApp", function() {
      /* 'LcForVf' is Lightning Component Name which we are Displaying In Vf Page 
       * syntax for create lightning component dynamically :
       * $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
      // Set Lightning Component Attributes Property before creating Lightning Component In Visualforce page 
        textColor : "Red",
        currentUserName : '{!$User.FirstName} {!$User.LastName}' 
    function(component) {
        // create component Callback, Lightning Component has been Created,
        // Now you can set more lightning Component attributes here,
        // and do more cool stuff here
        component.set("v.accId" , '{!$CurrentPage.parameters.recId}');
  • see code comments.

Visualforce Output :

How To Display Lightning Component In Visualforce Page
Output : Lightning Component Display In Visualforce Page
Useful Tips:
  • You can call $Lightning.use() multiple times on a VF page, but all calls must reference the same Lightning dependency application.
  • You can add more than 1 Lightning component to a page. That is, you can call $Lightning.createComponent() multiple times, with multiple DOM locators, to add components to different parts of the VF page. Each component created this way must be specified in the page’s Lightning dependency app.
Some Useful Resources :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂


Leave a Reply