Use Lightning Web Components in Visualforce

Today we do most of the new development in Lightning or Lightning web components ( LWC ). Previously it was not possible to use Lightning Web Component in Visualforce, But after summer 19 release we can now use LWC in visualforce. If you didn’t check the Summer 19 release notes yet, you can check the quick overview here.

We can use Lightning components in visualforce, using $A.createComponent and $Lightning.use. The concept is same in Lightning Web Components as well. You can find How to use Lightning Components in Visualforce here.

First we will create a simple Lightning Web Component component which display records in UI. It is a simple component where we will pass object name dynamically and then get the records and view them, if you want to learn more about dynamic binding in LWC you can read that here.

lwcVFDemo.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Display Lightning Web Components in Visual Force Page
        </h3>
        <div slot="footer">
                
        </div>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
                <thead>
                    <tr class="slds-text-title_caps">
                        
                        <th scope="col">
                            <div title="Key">Record Id</div>
                        </th>
                        <th scope="col">
                            <div title="Value">Record Name</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={sObjData} for:item="sobKey">
                        <tr key={sobKey.Id}>
                            <th scope="col">
                                {sobKey.Id}
                            </th>
                            <th scope="col">
                                {sobKey.Name}
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
    </lightning-card>
</template>

lwcVFDemo.js

import { LightningElement, api, track, wire } from 'lwc';
import fetchsObjectData from '@salesforce/apex/lwcVFDemoController.fetchsObjectData';

export default class LwcVFDemo extends LightningElement {
    @api objectName = 'Account';
    @track sObjData= [];

    @wire(fetchsObjectData, {obName :'$objectName'} )
    wiredResult(result) { 
        if (result.data) {
            this.sObjData = result.data;
        }
    }
}

lwcVFDemoController.apxc

public with sharing class lwcVFDemoController {
    @AuraEnabled(cacheable = true)
    public static List<SObject> fetchsObjectData(String obName){
        return database.query('SELECT ID, Name FROM '+obName+' LIMIT 5');
    }
}

After that we will create a Lightning app and create dependency on this component. This is similar of what we do for Lightning component

lwcVFDemoApp.app

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

Now the main part, where we will refer this app in Visualforce page. We will also pass one parameter from VF page to Lightning Web Components.

<apex:page >
    <apex:includeLightning />
    <div id="lightning" />
	<script>
		$Lightning.use("c:lwcVfDemoApp", function() {
        	 $Lightning.createComponent("c:lwcVFDemo", {
            	   objectName: "Contact"
                 },
              "lightning",
              function(cmp) {
                console.log("LWC component was created");
                // do some stuff
              }
          );
        });
    </script>
</apex:page>

The code is very simple and those who have used Lightning components in Visualforce must be familiar with it. Here we have first call the $Lightning.use to call the lightning app and then creating the components using $Lightning.createComponent and passing the object name as parameter. We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app. This is how our final output will look.

So now we can easily use Lightning Web Components in Visualforce. We can also use them in Lightning out which is also very much similar with Lightning components.

Did you like the post or want to add anything, let me know in comments. Happy Programming 🙂