Use Lightning Web Components in Visualforce Pages

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.

  1. Add the Lightning Web Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.

  <apex:includeLightning />



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”/>

Below is the lwc definition

<lightning-card title=”Hello” icon-name=”custom:custom14″>
<div class=”slds-m-around_medium”>
Hello, {greeting}!

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:includeLightning />
  <div id=”container”>

$Lightning.use(“c:lwcContainerApp”, function()
console.log(‘component created’);

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.


Published by


Hi.. I am a salesforce enthusiast and love lightning and JavaScript. Love to collaborate on different technical ideas to help each other and grow on this eco-system.

3 thoughts on “Use Lightning Web Components in Visualforce Pages”

  1. Hi there, You’ve done an excellent job. I will definitely digg
    it and personally suggest to my friends. I am confident
    they will be benefited from this site.

Leave a Reply

Your email address will not be published. Required fields are marked *