I have a lightning component which retrieve/update some account details.

I want to call this component from a quick action. In order to call it from a quick action I need this to be in a VF page.

Is there a way to directly access this component (without calling the application) in a VF page? (I do NOTneed to load the component through a domain->application)

I tried below code but it shows me just a blank page. Could some one please help me with this.

Please see the code below

visualForce page (I need the component to be displayed inside this VF page)

<apex:page >
<apex:includeScript value="/lightning/lightning.out.js" />
<apex:includeLightning />

<div id="lightning" />

    $Lightning.use("c:AccountsList", function() {
      { label : "Press Me!" },
      function(cmp) {
        var test = 'test';

Apex Controller Class

public class AccountsController {
   public static List<Account> getAccounts() {
        return [SELECT id, Name, Industry, CreatedDate
                FROM Account
                ORDER BY createdDate DESC];

AccountsList lightning Component

    <aura:component controller="AccountsController">
  <aura:attribute name="accounts" type="List" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <!-- Use the Apex model and controller to fetch server side data -->
  <table class="slds-table slds-table--bordered slds-table--striped">
            <th scope="col"><span class="slds-truncate">ID</span></th>
            <th scope="col"><span class="slds-truncate">Name</span></th>
            <th scope="col"><span class="slds-truncate">Type</span></th>
            <th scope="col"><span class="slds-truncate">Number Of Employees</span></th>
            <th scope="col"><span class="slds-truncate">Ticker Symbol</span></th>
            <th scope="col"><span class="slds-truncate">Phone</span></th>
            <th scope="col"><span class="slds-truncate">Details</span></th>  
      <aura:iteration items="{!v.accounts}" var="account">
            <c:button class="slds-button slds-button--neutral" 
                 svgClass="slds-icon slds-icon-text-default"


     doInit : function(component, event, helper) {      
        //Fetch the expense list from the Apex controller   
    showDetails: function(component, event, helper) {
        //Get data via "data-data" attribute
        alert(event.target.getAttribute("data-data") + " was passed");


     //Fetch the accounts from the Apex controller
    getAccountList: function(component) {
        var action = component.get("c.getAccounts");

        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set("v.accounts", actionResult.getReturnValue());            

Thanks in advance.

2 Answers 2


From the docs blog, in order to add a lightning component to a visualforce page...

you need to reference a Lightning app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components) that it uses...

According to this walkthrough blog, the app acts as a bridge between the two:

In order to display a Lightning Component in a Visualforce page, you need to construct a simple Lightning Application that is used as the bridge between the two technologies. This needs to have a dependency on the Lightning Component that will display the content...

In your case you would want to have an app something like:

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

Then in your visualforce page you set the $Lightning.use is set to the application and $Lightning.createComponent is set to the component. Another great blog here that breaks it all down.

  • is it a must to create a new domain if I need to call it in a VF page? The problem is my entire org redirects through my new domain.
    – Hasantha
    Commented Nov 29, 2015 at 22:29
  • @ahtnasah.li not for a visualforce page or community page. The release notes have a section about not needing my domain for those 2 and maybe a 3rd that I can't recall off the top of my head.
    – Jenny B
    Commented Nov 29, 2015 at 22:32

It appears that you are trying to load your component and then create some non-existing component.

Instead, you will need to load Lightning application and then dynammically create your component on the page.

Create new application and like in Jenny B answered, define c:AccountsList as dependancy.

Then, change your page to:

$Lightning.use("c:YourLightningApplicationName", function() {

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .