With Summer ’19 release, salesforce has introduced the use of lwc in visualforce pages. It will be used in same way like any aura components before.
Before starts, please sign up for pre-release developer edition.
Steps to add the Lightning web component in the visualforce page.
- Add the Lightning Web Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
<apex:page>
<apex:includeLightning />……
</apex:page>
2. Create and reference a standalone Aura app that declares your component dependencies.
<aura:application extends=”ltng:outApp” access=”GLOBAL”>
<aura:dependency resource=”c:demolwcforLighntingout” />
<aura:dependency resource=”markup://force:*” type=”EVENT”/>
</aura:application>
Below is the lwc definition
<template>
<lightning-card title=”Hello” icon-name=”custom:custom14″>
<div class=”slds-m-around_medium”>
Hello, {greeting}!
</div>
</lightning-card>
</template>
import { LightningElement,api } from ‘lwc’;
export default class DemolwcforLighntingout extends LightningElement
{
@api greeting ;
}
3. Write a JavaScript function that creates the component on the page using $Lightning.createComponent().
<apex:page>
<apex:includeLightning />
<div id=”container”>
</div>
<script>
$Lightning.use(“c:lwcContainerApp”, function()
{
$Lightning.createComponent(
“c:demolwcforLighntingout”,
{‘greeting’:’Somnath’},
“container”,
function(cmp)
{
console.log(‘component created’);
});
});
</script>
</apex:page>
Note: You can pass arguments to the lightning web components. In lwc, that property must be publicly accessible. So marking it with @api.
Use namespace:camelCaseComponentName naming convention to reference the Lightning web component.
Resources: https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_lwc_vf.htm