Add Lightning Components to Visualforce Pages

Integrate Lightning components into Visualforce pages for a dynamic development experience.

There are only three steps necessary to integrate components:

Add <apex:includeLightning /> to your Visualforce page
Tell your Visualforce page which Lightning app to use
Write a function that creates the component on the page

Adding <apex:includeLightning>

Add <apex:includeLightning /> at the beginning of your page. This loads the JavaScript file needed to use Lightning Components for Visualforce.

Referencing a Lightning App

To use Lightning Components for Visualforce, 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. Here’s an example of a simple app called lcvfTest.app. The app uses the <aura:dependency> tag to indicate that it uses the standard Lightning component, ui:button.

1<aura:application access="GLOBAL" extends="ltng:outApp"> 
2 <aura:dependency resource="ui:button"/>
3</aura:application>

To reference this app, use the following markup where theNamespace is the namespace prefix for the app—either your org’s namespace, or the namespace of the managed package that provides the app.

1$Lightning.use("theNamespace:lcvfTest", function() {});

If the app is defined in your org (that is, not in a managed package), you can use the default “c” namespace instead, as shown in the next example. If your org doesn’t have a namespace defined, you must use the default namespace.

Creating a Component on a Page

Finally, you want to create your component on a page using $Lightning.createComponent(String type, Object attributes, String locator, function callback). This function is similar to $A.createComponent(), but includes an additional locator parameter that specifies the ID of the DOM node where you want the component inserted. Let’s look at the code for a Visualforce page that creates a ui:button using lcvfTest.app from the previous step.

1<apex:page>
2    <apex:includeLightning />
3
4    <div id="lightning" />
5
6    <script>
7        $Lightning.use("c:lcvfTest", function() {
8          $Lightning.createComponent("ui:button",
9          { label : "Press Me!" },
10          "lightning",
11          function(cmp) {
12            // do some stuff
13          });
14        });
15    </script>
16</apex:page>

This code creates a DOM node with an ID “lightning” that’s referenced in the $Lightning.createComponent() method. This method creates a ui:button that says “Press Me!” and executes the callback function.

Lightning Components Developer's Guide

Add Lightning Components to Visualforce Pages

Adding <apex:includeLightning>

Referencing a Lightning App

Creating a Component on a Page