LWC in Visualforce Page

As we know lightning web component is growing day by day and it is very essential to make the LWC compatible with all other services in salesforce, so using the LWC in the visualforce page is very essential because we can not change all the legacy visualforce code to new LWC but we can start integrating the new feature in VF using LWC. we will be using the lightning out to enable the LWC in all the web pages.

LWC creates the Events using the Event or CustomEvent standard JavaScript classes. The CustomEvent class will allow you to store information in its detail property and then transmit those details(information) to the listeners of the event. Then, you can make an event target dispatch to invoking the dispatchEvent standard method.

Let’s create the LWC component

Helloworld.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>

Helloworld-html

Helloworld.js

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

Helloworld-js

As we discussed earlier we need the ltng:outApp to be extended in the app

Vflwc.app

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

Vflwc-app

Now we are ready with the component and we need to integrate it with the visualforce page

Vflwc.vfp

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

Vflwc-vfp

Explanation:

<apex:includeLightning />: This allows the VF page to enable the LWC in the VF page.

$Lightning.use: This is used to integrate the component in VF.

output

lwc-visualforce-output

Salesforce Menu

Salesforce Lightning

Salesforce LWC