Use Components in Visualforce Pages

Implement new functionality with Lightning web components, and then add the components to existing Visualforce pages.

Lightning Components for Visualforce is based on Lightning Out (Beta), a powerful and flexible feature that lets you embed Aura and Lightning web components into almost any web page. When used with Visualforce, some aspects of Lightning Out are simplified. For example, you don’t need to implement your own authentication or configure a connected app.

Otherwise, using Lightning Components for Visualforce is similar to using Lightning Out. See Use Components Outside Salesforce with Lightning Out (Beta).

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 that Lightning Components for Visualforce uses.

Create a Lightning Out app, a special type of standalone Aura app. Make the app globally accessible and extend ltng:outApp. Declare dependencies on any Lightning definitions, such as the components that your Lightning Out app uses.

The Lightning Components for Visualforce JavaScript library loads from the org that the Visualforce page is in, so your Lightning Out app must exist in the same org as the Visualforce page.

This example Lightning Out 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 Salesforce Lightning Design System (SLDS) resources to the page so that your Lightning web components have SLDS styling. If you don’t want to add SLDS resources, 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 instead of a managed package, use the default c namespace, 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 Out 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 Lightning Out 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 considered third-party cookies. Your users must allow third-party cookies in their browser settings. See Lightning Out Requirements.

See Also