Lightning Web Components (LWC) is a framework for building reusable, scalable, and performant components for the Salesforce Lightning Experience and Salesforce App Cloud. LWC is built on modern web standards and provides a high-performance alternative to Salesforce’s original Aura framework.

You can add lightning web components to existing Visualforce pages. This allows you to implement new functionality offered by Lightning web components and be able to use it on existing Visualforce pages.

To use LWC in Visualforce, you can follow these steps:

1. Create a Lightning Web Component
2. Add the Lightning Web Component to Visualforce
3. Pass Data to the Lightning Web Component
4. Get Data from the Lightning Web Component

Step 1: Create a Lightning Web Component

To create a new Lightning Web Component, use the Salesforce CLI to create a new project and component:

sfdx force:project:create --projectname my-project
cd my-project
sfdx force:lightning:component:create --type lwc --componentname my-component

This will create a new project and a new LWC component with the name my-component.

Step 2: Add the Lightning Web Component to Visualforce

To use the LWC component in a Visualforce page, you can use the lightning:container component to include the LWC component in the page.

First, make sure that the LWC component is available in your org. You can do this by running the following command:

sfdx force:source:push

Then, in your Visualforce page, add the lightning:container component and specify the name of your LWC component as the src attribute:

<apex:page>
  <lightning:container src="c/my-component" />
</apex:page>

Step 3: Pass Data to the Lightning Web Component

You can pass data from the Visualforce page to the LWC component using the lightning:container component’s attributes attribute. The attributes attribute takes a JSON object that contains the data you want to pass to the LWC component.

For example, to pass a variable message from the Visualforce page to the LWC component, you can do the following:

<apex:page>
  <lightning:container src="c/my-component" attributes="{ message: 'Hello World' }" />
</apex:page>

In the LWC component, you can access the message variable using the @api decorator:

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
  @api message;
}

Step 4: Get Data from the Lightning Web Component

You can also get data from the LWC component back to the Visualforce page. To do this, you can use the @api decorator in the LWC component to expose a variable, and then use the lightning:container component’s onmessage attribute to handle the message in the Visualforce page.

For example, to expose a response variable from the LWC component and handle it in the Visualforce page, you can do the following:

In the LWC component:

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
  @api response = 'Hello from LWC';
}

In the Visualforce page:

<apex:page>
  <lightning:container src="c/my-component" onmessage="handleMessage" />
  <script>

Wrapping it Up

In this blog, post we covered how to use a Lightning Web Component inside in a Visualforce page.

If you found this post useful, please consider reading my other posts about Lightning Web Components.

Also published on Medium.