I have a custom VF page that displays information from a custom object. I currently have a checkbox that displays/hides a VF section to enter a new record of this type, but would like to make use of a Lightning Component to do this instead as a popup like it would on an Action. I have the VF page and have created the Lightning component, but don't know how to make the VF page call the component. I've looked at some other articles but can't figure out the best way of doing it. I am new to Lightning Components btw! I thought of changing the checkbox to a button, but other than that am not sure of the best way forward and would appreciate clear instructions (bearing in mind my inexperience with Lightning components).

1 Answer 1


You'll need to make use of Lightning Out to dynamically create your Lightning component in Visualforce and attach it to an HTML element.

Lightning Out works just fine, but it comes with some additional overhead and considerations. The specific steps you take are outlined in the linked documentation, but I'll quickly summarize here.

  1. You have to create a special Lightning dependency app to declare which components you plan to use in the page.
  2. You declare your intent to use Lightning with the <apex:includeLightning/> component in Visualforce.
  3. Your Visualforce page needs to call $Lightning.use() to bring in those dependencies.
  4. Only once $Lightning.use() fires its callback can you actually create the component, by doing $Lightning.CreateComponent().

    Note that for your use case this generates a bit of a synchronization problem in your JavaScript. You have to make sure, when your button is clicked, that you don't try to create a Lightning component if the Lightning infrastructure is still loading.

The other wrinkle to consider is that your Lightning Out "container" is not equivalent to the full Lightning Experience. Many standard components and events have limited functionality or simply don't work at all, because they're dependent on the one.app Lightning container used in the full Lightning experience and Salesforce mobile app.

From Lightning Out Considerations and Limitations:

Many standard components don’t behave correctly when used in a stand-alone context, such as Lightning Out, and Lightning Components for Visualforce, which is based on Lightning Out. This is because the components implicitly depend on resources available in the one.app container.

You can tell which components are supported by looking at the "Experience" header item in the component's entry in the Lightning Component Library. For example, <lightning:navigation> is not supported in Lightning Out; its Experience header reads

Lightning Experience, Salesforce Mobile App

Conversely, <lightning:layout> works just fine:

Lightning Experience, Lightning Communities, Salesforce Mobile App, Lightning Out / Visualforce, Standalone Lightning App

  • Thanks for your detailed explanation David. Do you think it is worth going this route at all then? Or to simply use only VF instead and forget about trying to make it work with a Lightning component?
    – Irene
    Mar 20, 2019 at 19:47
  • @Irene I think it's pretty case-specific. If you really need to use that Lightning component and you're not dependent on any functionality that comes from one.app, go for it. Just know what you're getting into! On the other hand, if using Lightning in Visualforce doesn't really buy you much of anything, it's probably better to just stick with straight Visualforce.
    – David Reed
    Mar 20, 2019 at 19:54

You must log in to answer this question.

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