Use Lightning Component into VF page – Lightning OUT

Have you ever used lightning component into your VF page? Have you ever think why we should create VF page and Lightning Component for the same functionality?

In all of my projects that I am working, I have stopped creating VF pages and Yes, it is 80% true ūüôā but I used to work on VF page for those clients that are still into Salesforce Classic.


I always use my lightning component into my VF page and it is right approach as everyone(Meetups, Dreamforce, Webinars, Salesforce docs) are talking about Lightning and it is future.

In this tutorial, we will create a lightning component, its controller(.jsfile), and an apex class which will display a list of Account into Lightning Component.

We will create a Lightning Application which will extend lightning out js file and a VF page where we will call that Lightning Component.

All resources used in this tutorial are listed below and can be found at my Github Repo.

1 – AccountList.cmp – The component which displays the list of All the accounts

2 – AccountListController.js – JS file the controller of AccountList component to communicate with Apex class and set the data into the component attribute.

3 – AccountController.cls – The apex class to query account records.

4 – – The app which contains the AccountList component

5 –¬†AccountListVF.vfp – The VF page, where we will call the lightning component.

Key points to remember: –

  1. use <apex:includeLightning /> tags at the beginning of VF page This component loads the JavaScript file used by Lightning Components for Visualforce.
  2. Lightning App must extend ltng:outApp library/interface.
  3. We can use $Lightning.use() many times into VF page but that must reference the same lightning app.
  4. We can only call those components that are referenced into the app.

<aura:application access=”Global” extends=”ltng:outApp” >
                      <c:AccountList ></c:AccountList>

Description of above code

access: – determines, if we can use the component throughout the Salesforce org or not acceptable values, are global, public, private

ltng:outApp: –¬†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. using¬†ltng:outApp we can access our lightning component into VF page or any external site.


<apex:page >
<apex:includeLightning />

¬† ¬† ¬† ¬† <– div where we will embed our lightning component –>

<div id=”lightning” />
$Lightning.use(“c:LightningOutDemoApp”, function() {
“VFpageValue” : “Woohoooo, Lightning Out is an amazing feature of Salesforce Lightning”
function(cmp) {



$Lightning.use(): – Refer the lightning application that we are using.

$Lightning.createComponent(): – Used to dynamically creating the lightning component.

You will find the complete code into my Github Repo.

Resources: –

Salesforce Document

Salesforce Document Lightning Out

Lightning Icon

Lightning Card