How to call LWC in Visualforce Pages

In Salesforce development, integrating Lightning Web Components (LWC) into Visualforce Pages is indispensable for a variety of tasks.

This integration is especially crucial when:

Ensuring consistent user experiences in both Lightning and Classic interfaces.
Utilizing Lightning Web Components within Force.com sites or Portals for extended functionality.
Extending the reach of LWC components beyond the Salesforce ecosystem.

By using LWC in VF pages, users can get a unified experience across Lightning and Classic interfaces for a diverse user base and harness the power of Lightning Web Components outside of Salesforce, opening avenues for external applications and services.

In this guide, we’ll walk you through the essential steps to call LWC in Visualforce Pages, enabling you to leverage the strengths of both technologies seamlessly. Let’s begin!

Steps to Call LWC in Visualforce Pages

1. Create a Lightning Web Component:

You can use the below code for the component and deploy it to your salesforce org.
Note:- The name of my component is ‘CallingLwcInVfPages’

HTML Code:

JS Code:

Js-Meta.xml Code:

Note: You can change the target and specify where you want that component to be shown e.g “lightning__AppPage”

Now, we will require an intermediate Aura Application. The necessity for this application arises because we can not directly use LWC or AURA within VisualForce. Therefore, we must establish a dependency on the Aura Application.

2. Create an Aura/Lightning Component:

This aura application will serve as a wrapper for our Lightning web component. After creating the application, proceed to establish the dependency for our application.

Note: The name of my Aura Application is ‘visualforceAuraApplications’

Aura Application:

3. Create a Visualforce Page:

Now, the final step is to create a VisualForce Page which will have LWC inside the same.

To load your LWC or Aura Component inside the VF page we will use the $Lightning.use() method.

The $Lightning.use() function takes four arguments & they are as follows:

appName(String): Required* (The name of our lightning dependency app, including namespace. For example, “c:visualforceAuraApplications”)

Note: We must follow ‘Camel Case’ notation while calling our LWC component inside our Aura Application

Callback(function): A function to call once the Lightning Component framework and our app have fully loaded. The callback receives no arguments. This callback is usually where you call $Lightning.createComponent() to add our app to the page
lightningEndPointURL(String): Optional if we are using inside Salesforce. The URL for the Lightning domain on your Salesforce instance. For example, https://MyDomain.lightning.force.com.
authToken: Optional if we are using inside Salesforce.

VF Page Code:

4. Preview the Outcome

Now, click on “Preview” or “Preview your VF page”. Wait for a few seconds and you will observe the output as follows:

Conclusion:

By following these steps, you can harness the combined power of Lightning Web Components and Visualforce, opening doors to new possibilities in Salesforce development.

Share your experiences with us, and stay tuned for more insightful solutions in the ever-evolving landscape of Salesforce development. Happy Learning!