How to include a Lightning Web Component into the Visualforce Page

Hi,

Here we are going to learn how to include a Lightning web component into the Visualforce with simple steps.

Let's take one small Lightning web component called "welcomeComp".

welcomeComp.html:

<template>    

    <lightning-card  title="LWC in VF Page">       

        <p class="slds-p-horizontal_small">{welcomeMsg}</p>      

    </lightning-card>

</template>

    

welcomeComp.js:

import { LightningElement,api } from 'lwc';

export default class WelcomeComp extends LightningElement {

    @api welcomeMsg='';

}

welcomeComp.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>47.0</apiVersion>

    <isExposed>false</isExposed>  

</LightningComponentBundle>

Create a Standalone Aura Dependency App called "AppforVF". 

Add an <aura:dependency> tag for every Lightning web component as shown below.

Use the <namespace:camelCaseComponentName> naming convention to reference a custom Lightning web component.

Make the app globally accessible and extend ltng:outApp. Declare dependencies on any Lightning definitions (like components) that it uses.

<aura:application access="GLOBAL" extends="ltng:outApp">    

    <aura:dependency resource="c:welcomeComp"/>

</aura:application>

Now let's take a Visualforce page called "LWCVF":

Add <apex:includeLightning/> at the beginning of your Visualforce page.

This component loads the JavaScript file used by Lightning Components for Visualforce.

To reference the above standalone app on your Visualforce page, use the following JavaScript code, where the namespace is the namespace prefix for the app. That is, either your org’s namespace, or the namespace of the managed package that provides the app.

$Lightning.use("theNamespace:lwcvf", function() {});

If the app is defined in your org (that is, not in a managed package), use the default c namespace instead.

Finally, add your top-level component "welcomeComp" to a page using the following code. 

$Lightning.createComponent(String type(componentName), Object attributes(parameters), String domLocator,callback function) 

Here 

componentName: 

Required. The name of the Lightning web component to add to the page, including the

namespace.

eg:"c:welcomeComp"

attributes:

Required. The attributes to set on the component when it’s created.
eg:{welcomeMsg:"Welcome to Lightning web components"}

domLocator:

Required. The DOM element or element ID that indicates where on the page to insert

the created component.

callback function:

A function to call once the component is added to and active on the page. The

callback receives the component created as its only argument.

Eg:

<apex:page applyBodyTag="false" controller="RegistrationController" showHeader="false">

   <apex:includeLightning />  

   <div id="ltngvf" /> 

    <script>

        $Lightning.use("c:AppforVF", function() {

          $Lightning.createComponent("c:welcomeComp",{welcomeMsg:"Welcome to Lightning Web Components!"},          

          "ltngvf",

          function(cmp) {

            // do some stuff

          });

        });

    </script>

</apex:page>

output:

Here "$Lightning.createComponent()" adds the component "welcomeComp" into the  DOM element with the ID "ltngvf"

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_visualforce

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.lightning_out_markup