How to Use Visualforce with Lightning Web Components (LWC) in Salesforce

Suppose a company is still using Visualforce pages in Salesforce for some old features. Now the development team wants to use Lightning Web Components (LWC) to build modern and faster UI components.

Instead of rewriting the entire Visualforce page, the developer decides to embed a Lightning Web Component inside the Visualforce page.

For example, the company has a Visualforce page to display Account details. The developer creates a Lightning Web Component to show recent Opportunities of that Account in a better UI. Then the developer loads that LWC inside the Visualforce page.

This way, the company can use modern LWC features while still keeping the existing Visualforce page.

This approach helps when:

• You want to modernize old Visualforce pages.
• You want to reuse existing Visualforce functionality.
• You want to add new Lightning features without rebuilding everything.

In this article, we will learn about how to use a Visualforce page with Lightning Web Components (LWC) in Salesforce.

Why Use LWC with Visualforce?

Before we see the implementation, let’s understand why we need to use LWC with Visualforce.

Many Salesforce organizations still use legacy Visualforce pages in production. These pages may contain important business logic and functionality.

If a developer wants to add new modern UI components, rewriting the entire Visualforce page may take a lot of time.

Instead of rebuilding everything, developers can simply embed Lightning components inside the Visualforce page.

Some common reasons include:

• Modernizing old Visualforce pages
• Reusing existing Visualforce functionality
• Adding Lightning UI features to old pages
• Gradually migrating to Lightning framework

This approach helps companies upgrade their UI without breaking existing systems.

Real-Time Scenario

Let’s understand this concept with a simple real-time example. Suppose a company has an old Visualforce page that displays Account details.

Now the development team wants to add a modern component that shows Account information in a better UI using Lightning Web Components.

Instead of recreating the whole Visualforce page, the developer decides to:

1. Create a Lightning Web Component
2. Wrap it inside an Aura Component
3. Load that Aura component inside the Visualforce page

This allows the Visualforce page to display modern Lightning UI components.

Use Visualforce with Lightning Web Components in Salesforce

To embed a Visualforce page in a Lightning Web Component, we will first create a sample Visualforce page, which will then be embedded in a Lightning Web Component.

Create a Visualforce Page in Salesforce

If you don’t have an existing Visualforce page, follow the steps below to create a custom Visualforce page.

1. Navigate to the setup page of Salesforce Lightning, and in the quick find, search and select Visualforce pages.
   • We have two options for creating a Visualforce page: one from the Developer Console and another from the Visualforce Page Setup.
   • In this example, we will create the Visualforce page from the Visualforce setup. To do so, click on the New button.

2. In this step, enter the Label and Name for the Visualforce page. Then, select the checkbox ‘Available for Lightning Experience’.
   • In the Visualforce Markup tab, enter the code below to define the Visualforce page.
   • In this, we have used the <h1> tag to define the heading and used the <apex:form> tag to define a section of a page that allows users to enter input and submit it using the <apex:commandButton>.

<apex:page>
    <h1>Welcome to the Visualforce Page</h1>
    <apex:form>
        <apex:inputText label="Enter your name:" />
        <apex:commandButton value="Submit" action="{!save}"/>
    </apex:form>
</apex:page>

3. In this example, the Visualforce page displays an input field for entering the name, accompanied by a Submit button.

With this, we have created a sample Visualforce page.

Create Lightning Web Component With Visualforce Page in Salesforce

Now, we will create a Lightning web component that embeds the Visualforce page we created in the previous steps.

Open the VS Code or any other IDE integrated with your Salesforce org. Then, follow the steps below.

1. In VS Code, press the keys Ctrl+Shift+P to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.

2. Label the Lightning Web Component as visualForceComponent and press enter.
   • As we create the Lightning Web Component, it will give three files in the LWC folder: visualForceComponent.js, visualForceComponent.html, and meta.xml.
   • Enter the code below in the HTML file to embed the Visualforce page in the Lightning Web Component.
   • In this template, we have used the <iframe> tag to embed the visualforce page.
   • The src=”/apex/LcVisualforcePage” is the URL source of the visualforce page.

<template>
    <div class="slds-box">
        <iframe src="/apex/LcVisualforcePage" width="100%" height="600px" frameborder="0"></iframe>
    </div>
</template>

To obtain the source URL of the Visualforce page, navigate to the Visualforce page and open it in Preview. Then, from the URL, copy the values after the organization address.

3. To display the Visualforce page correctly in the Lightning web component, create a CSS file in the same component and enter the code below.
   • To create a CSS file, right-click on the LWC component folder and select New File, then enter the label as visualForceComponent.css.
   • Since we are showing a basic embedding and the logic is handled in the Visualforce page, we don’t need to define anything in the JS file.

.slds-box {
    padding: 20px;
    border: 1px solid #d8dde6;
    border-radius: 4px;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16);
}

4. Enter the code below in the meta.xml file in the <LightningComponentBundle> tag to make the component accessible to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. Navigate to the Lightning page to deploy the Lightning web component, click on the settings icon, and select Edit Page.
   • Go to the Components section in the Lightning App builder, drag and drop the Lightning web component to the page region, and save the changes.
   • Now, in the Lightning web component, you will see the sample form with the Name input and Submit button that we defined in the Visualforce page.

This way, we can embed a Visualforce page in the Lightning web component using the <iframe> tag.

Use Existing Visualforce Page in a Salesforce Lightning Web Component

Let’s take a real-time example where we have an existing Visualforce page to create a Contact form. In the steps below, we will see how to embed this Visualforce page in the LWC.

1. To add the Visualforce page to the Lightning web component, ensure that it is accessible for the Lightning Experience.
   • To do this, navigate to the Visualforce page setup and open the Visualforce page. Then, ensure that you have selected the checkboxes for ‘Available for Lightning Experience’, ‘Experience Builder sites’, and the mobile app.

2. Another thing we need here is the Visual page URL, which we will use to embed it in the Lightning Web Component.
   • To obtain the Visualforce page URL, open it in Preview mode and then copy the values after the Salesforce org address from the URL.

3. Now, we will create a Lightning web component to add the existing Visualforce page ContactForm.
   • In VS Code, press the keys Ctrl+Shift+P to open the Command Palette. Type SFDX and select SFDX: Create Lightning Web Component.
   • Enter the Lightning Web Component name in camel case and press Enter.
   • Now, you will see files .html, .js, and meta.xml in the new Lightning Web Component.
   • The logic of embedding the Visualforce page will be handled in the HTML file. For this, we will use the <iframe> tag and the URL source of the Visualforce page.

<template>
    <lightning-card title="Contact Form">
        <div class="slds-p-around_medium">
            <iframe src={vfPageUrl} width="100%" height="600px"></iframe>
        </div>
    </lightning-card>
</template>

In the above code, we have used <iframe src={vfPageUrl}> to retrieve the URL from the JavaScript file dynamically.

4. Enter the code below in the JavaScript file to define the URL source of the Visualforce page.

import { LightningElement } from 'lwc';

export default class ContactFormLWC extends LightningElement {
    vfPageUrl = '/apex/ContactForm'; 
}

5. Now, make the Lightning web component available to the Lightning pages by entering the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

6. Navigate to the Lightning page and deploy the LWC component using the Lightning App Builder.
   • Now, we can see that the Visualforce page displays the Contact form inside the LWC component.

This way, we can easily embed the Salesforce Visualforce page inside the Lightning web component using the <iframe> tag.

Conclusion

In many Salesforce organizations, Visualforce pages are still actively used. However, modern development now focuses on Lightning Web Components.

Instead of rebuilding everything, developers can use Lightning Web Components inside Visualforce pages using Lightning Out and an Aura wrapper.

This approach helps organizations modernize their UI while keeping existing functionality intact.

By following the steps in this guide, you can successfully integrate Visualforce with Lightning Web Components in Salesforce.

You may also like to read:

• Create Lightning Web Component In Salesforce Developer Console
• Searchable Lightning Combobox in Lightning Web Component
• Rename Lightning Web Component in Salesforce?
• Override Standard Button Using Lightning Web Component (LWC)
• Embed Lightning Web Component In Visualforce Page

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.