How to call Lightning Web components from Visualforce page

This post explains how to call Lightning web components from the visualforce page.

From Summer 19 onwards we can use Lightning web component in the visualforce page,
normally to call lightning components in the visualforce page we used  $A.createComponent and $Lightning.use.
we can use the same concept as well in lightning web components.

Note: To work this functionality, API version should be above or equal to v46

Demo:

lwcInVisualforceDemo.html

<template>
    <lightning-card title="Calling Lightning Web Components From Visualforce Page" icon-name="standard:account">
        <template if:true={accData}>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div title="Key">Account Name</div>
                        </th>
                        <th scope="col">
                            <div title="Value">Industry</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={accData} for:item="acc">
                        <tr key={acc.key}>
                            <th scope="col">
                                <div>{acc.Name}</div>
                            </th>
                            <th scope="col">
                                <div>{acc.Industry}</div>
                            </th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

lwcInVisualforceDemo.js

import { LightningElement, track, wire } from 'lwc';
// importing apex class and method to retrive accounts
import retriveAccounts  from '@salesforce/apex/LWCExampleController.fetchAccounts';

export default class LwcInVisualforceDemo extends LightningElement {

    // to track object name from vf page
    @track objName = 'Account';
    @track accData;
    @track error;

    // getting accounts using wire service
    @wire(retriveAccounts, {strObjectName : '$objName'})
    accounts({data, error}) {
        if(data) {
            this.accData = data;
            this.error = undefined;
        }
        else if(error) {
            this.accData = undefined;
            this.error = error;
            window.console.log(error);
        }
    }
}

LWCExampleController.cls

public inherited sharing class LWCExampleController {
    @AuraEnabled(Cacheable = true)
    public static list<Account> fetchAccounts(String strObjectName) {
        if(String.isNotBlank(strObjectName)) {
            return Database.query('SELECT Id, Name, Industry From ' + strObjectName + ' limit 10');
        }
        else {
            return null;
        }
    }
}

Create lightning out dependency Lightning application, and Visualforce page to call lwc component.

CallingLWCFromPage.page

<apex:page>
    <apex:includeLightning />
    <div id="lwcDemo" />
    <script>
    $Lightning.use("c:lwcInVisualforceApp", function() {
        $Lightning.createComponent("c:lwcInVisualforceDemo", {
            //pass parameter values to lwc js controller
            objName : "Account" // optional parameter, I already declared value in lwc js controller.
        },
        "lwcDemo",
            function(component) {
             console.log("Lightning Web Component created Successfully!!");
              // extend the functionality as per your requirement
            }
       );
    });
    </script>
</apex:page>

lwcInVisualforceApp.app

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

Result:

Resource:
https://releasenotes.docs.salesforce.com/en-us/summer19/release-notes/rn_lwc_vf.htm?edition=&impact=