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.
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,
<aura:dependency> tag for every Lightning web component that you use. Use the
<namespace:camelCaseComponentName> naming convention to reference a custom Lightning web component.
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
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.
$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.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.