Use Lightning Components in Visualforce Pages
- Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
- Create and reference a Lightning Out app that declares your component dependencies.
- Write a JavaScript function that creates the component on the page using $Lightning.createComponent().
Add the Lightning Components for Visualforce JavaScript Library
Add <apex:includeLightning/> at the beginning of your page. This component loads the JavaScript file used by Lightning Components for Visualforce.
Create and Reference a Lightning Out App
To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning Out app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning component that it uses.
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="lightning:button"/>
</aura:application>
$Lightning.use("theNamespace:lcvfTest", function() {});
For details about creating a Lightning Out app, see Lightning Out Dependencies in the Lightning Web Components Developer Guide.
Creating a Component on a Page
Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String domLocator, function callback). This function is similar to $A.createComponent(), but it includes an additional parameter, domLocator, that specifies the DOM element where you want the component inserted.
<apex:page>
<apex:includeLightning />
<div id="lightning" />
<script>
$Lightning.use("c:lcvfTest", function() {
$Lightning.createComponent("lightning:button",
{ label : "Press Me!" },
"lightning",
function(cmp) {
console.log("button was created");
// do some stuff
}
);
});
</script>
</apex:page>
The $Lightning.createComponent() call creates a button with a “Press Me!” label. The button is inserted in a DOM element with the ID “lightning”. After the button is added and active on the page, the callback function is invoked and executes a console.log() statement. The callback receives the component created as its only argument. In this simple example, the button isn't configured to do anything.
For details about using $Lightning.use() and $Lightning.createComponent(), see Lightning Out Markup in the Lightning Web Components Developer Guide.
Limitations
If a Visualforce page contains an Aura component, you can’t render the Visualforce page as a PDF.
Browser Third-Party Cookies
Lightning components set cookies in a user’s browser. Because Lightning components and Visualforce are served from different domains, these cookies are “third-party” cookies.
You can use several approaches for enabling Lightning components in Visualforce to work with third-party cookies. See Enable Browser Third-Party Cookies for Lightning Out in the Lightning Web Components Developer Guide.