Use Lightning Components in Visualforce Pages

Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it with existing Visualforce pages.

There are three steps to add Lightning components to a Visualforce page.

Add the <apex:includeLightning /> component to your Visualforce page.
Reference a Lightning app that declares your component dependencies with $Lightning.use().
Write a function that creates the component on the page with $Lightning.createComponent().

Adding <apex:includeLightning>

Add <apex:includeLightning /> at the beginning of your page. This component loads the JavaScript file used by Lightning Components for Visualforce.

Referencing a Lightning App

To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning dependency 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. That is, 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, 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 parameter, domLocator, which specifies the DOM element where you want the component inserted.

Let’s look at a sample Visualforce page that creates a ui:button using the lcvfTest.app from the previous example.

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 element with the ID “lightning”, which is then referenced in the $Lightning.createComponent() method. This method creates a ui:button that says “Press Me!”, and then executes the callback function.

You can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.

Important

Lightning Components Developer Guide

Use Lightning Components in Visualforce Pages

Adding <apex:includeLightning>

Referencing a Lightning App

Creating a Component on a Page

See Also: