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 🙂
can we do the same using Imperative
Yes we can, check my other post where I have used both methods.
Hey.. Great article.. Suppose, I need to download it as a pdf document. I tried with renderAs=”pdf” but it didn’t seem to work. it showed up as a blank page.
I don’t think it will work. You can try ctrl + P or window.print() . But not sure about UI in this approach.
Thank you for this example, it helped me a lot.
Sadly i have a problem.. I’m using the NavigationMixin in my LWC to redirect and generate URLs.
Do you have an idea how to make this possible inside the visualforce page?
currently it just returns “javascript:void(0);” instead of an URL
the code inside the lwc.js is:
// Generate a URL to a User record page
this[NavigationMixin.GenerateUrl]({
type: ‘standard__recordPage’,
attributes: {
recordId: id
objectApiName: objectName,
actionName: ‘view’,
},
}).then(url => {
this.detailViewUrl = url;
});
Hi Tushar,
How do we bind a vf page inside a button for printing in lwc?