Use Lightning Web Components in Visualforce

Use Lightning Web Components in Visualforce

Use Lightning Web Components in Visualforce

In this post, we will see how we can use LWC in Visualforce Pages or how to display Lightning Web Component In Visualforce Page. Even though the use of lightning is growing day by day, still some customers are using salesforce classic because of many reasons. Sometimes there is a requirement to use lightning web component in visualforce page.

Lightning Web Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed 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. If you are looking for using lightning aura components in visualforce pages, please refer to Use Lightning Components in Visualforce Pages.

In this example, we will see a very basic example of the lightning web component and then display lightning web component in the visualforce page.

helloComponentForVFLWC.html

<template>
    <lightning-card title="Use LWC in Visualforce" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            Hello, This is LWC for visualforce page
        </div>
    </lightning-card>
</template>

helloComponentForVFLWC.js

import { LightningElement } from 'lwc';
export default class HelloComponentForVFLWC extends LightningElement {}

HelloLWCExampleApp.app

Here important point is that ltng:outApp needs to be extended in app.

ltng:outApp adds SLDS resources to the page to allow our Lightning components to be styled with the Salesforce Lightning Design System. If we don’t want SLDS resources added to the page, we need to extend from ltng:outAppUnstyled instead.

<aura:application extends="ltng:outApp" access="GLOBAL">
    <aura:dependency resource="helloComponentForVFLWC" />
</aura:application>

HelloLWCExampleVF.page

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid" />    
    <script>
    $Lightning.use("c:HelloLWCExampleApp", function() {
        $Lightning.createComponent("c:helloComponentForVFLWC",
          { 
          },
          "LightningComponentid",
          function(cmp) {
             console.log('LWC Componenet added in VF page');
          });
    });
    </script>
</apex:page>

In the above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

We can use $Lightning.use() method in JavaScript to refer to Lightning Application which extends ltng:outApp.

We can use $Lightning.createComponent create Lightning Component dynamically.

We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.

We will get the following output

For more detail please refer to official link