Use Components in Visualforce Pages
Add Lightning web components to your Visualforce pages to leverage any investment you’ve made in Visualforce. Implement new functionality using Lightning web components and then use it with existing Visualforce pages.
Lightning Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Aura and Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a connected app.
In other ways, using Lightning Components for Visualforce is just like using Lightning Out. For more information, see Lightning Out.
There are three steps to add a Lightning web component to a Visualforce page.
Add <apex:includeLightning/> at the beginning of your Visualforce page. This component loads the JavaScript file used by Lightning Components for Visualforce.
Create a standalone Aura dependency app. Make the app globally accessible and extend ltng:outApp. Declare dependencies on any Lightning definitions (like components) that it uses.
This example Aura dependency app uses the <aura:dependency> Aura tag to indicate that it uses the standard Lightning component, lightning:button.
Add an <aura:dependency> tag for every Lightning web component that you use. Use the <namespace:camelCaseComponentName> naming convention to reference a custom Lightning web component.
Extending from ltng:outApp adds SLDS resources to the page to allow your components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead.
To reference this app on your Visualforce page, use the following JavaScript code, 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.
If the app is defined in your org (that is, not in a managed package), 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.
For further details about creating a Lightning dependency app, see Lightning Out Dependencies.
Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String domLocator, function callback).
Let’s look at a sample Visualforce page that creates a lightning:button using the lwcvf.app from the previous example.
The $Lightning.createComponent() call creates a button with a “Press Me!” label. The button is inserted in a DOM element with the ID lightningvf. 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.
You can call $Lightning.use() multiple times on a page, but all calls must reference the same standalone Aura dependency app.
For further details about using $Lightning.use() and $Lightning.createComponent(), see Lightning Out Markup.
Lightning components set cookies in a user’s browser. Since Lightning components and Visualforce are served from different domains, those cookies are “third-party” cookies. Your users must allow third-party cookies in their browser settings. For more details, including the requirement to disable the Prevent cross-site tracking setting in Safari, see Lightning Out Requirements.
See Also