How to use Lightning Web Components in Visualforce Page?

In this article we will learn how to embed Lightning Web Components in Visualforce page.

In order to display Lightning Web Components in Visualforce Page we have to follow below steps.

Create LWC Component

First of all we have to create the LWC component which we need to use in Visualforce Page. Here we have created a LWC Component named lwcForVF. Have a look at the code below.

<template>
    <lightning-card title="My Lightning Card" icon-name="custom:custom14">
        <div class="slds-p-around_medium">
            <p>This is a sample component for learning How to display LWC in Visualforce Page. You can customize it as needed.</p>
        </div>
    </lightning-card>
</template>

Here we have just added a lightning card with some sample text.

Create Lightning Application

To use Lightning Web Component in Visualforce page we have to created Lightning Application.

We also need to add the <aura:dependency> tag, which signifies that a custom Lightning Web Component is being used. Inside the <aura:dependency> tag, we should specify the name of our Lightning Web Component.

For example, we’ve created a Lightning application called EmbedLWCApp. Here’s the code for the Lightning application, including the <aura:dependency> tag:

<aura:application extends="ltng:outApp" >
	<aura:dependency resource="c:lwcForVF"/>
</aura:application>

As you can see above code we have set resource attribute to the name of the LWC Component which we created earlier.

Create Visualforce Page

We want to show LWC Component in Visualforce Page. Hence we need to create a Visualforce Page.

We created a Visualforce Page named VFLWCExample. Look at the code below.

<apex:page showHeader="false" standardStylesheets="false">
    <apex:includeLightning />

    <div id="lwc"></div>
    <script>
        $Lightning.use("c:EmbedLWCApp", function() {
            $Lightning.createComponent(
                "c:lwcForVF",
                {},
                "lwc",
                function(cmp) {
                    console.log("Lightning Web Component is Loaded...");
                }
            );
        });
    </script>
</apex:page>

Let’s try to understand the code.

• We have included the Lightning Component framework’s JavaScript using <apex:includeLightning />, which allows us to use $Lightning methods.
• We have created a div with id="lwc" to serve as a placeholder for the Lightning Web Component.
• We have loaded the Lightning application named EmbedLWCApp from the c namespace using $Lightning.use().
• We have created the Lightning Web Component named lwcForVF and attached it to the div with id="lwc" using $Lightning.createComponent().
• We have logged a message to the console using a callback function after the component is successfully created.
• We have embedded a Lightning Web Component inside a Visualforce page to combine Visualforce and Lightning functionality.

Once you have created the Visualforce page click on the preview button and you will see a lightning card like below image.

We hope now you know How to display lightning web component in Visualforce page. If you have any doubts then let us know in the comment box below.