How to Use Visualforce with Lightning Web Components (LWC) in Salesforce
Summary
The article explains how to embed Lightning Web Components (LWCs) inside existing Visualforce pages in Salesforce, enabling teams to modernize UI without rewriting legacy pages. It provides step-by-step instructions to create Visualforce pages and LWCs that load these pages via iframes, facilitating gradual migration to Lightning while preserving business logic. Salesforce developers can directly apply this technique to enhance older Visualforce pages with modern Lightning features more efficiently.
Takeaways
- Embed Visualforce pages inside Lightning Web Components using iframes for UI modernization.
- Wrap LWCs inside Aura components to load in Visualforce pages when needed.
- Ensure Visualforce pages are marked available for Lightning Experience before embedding.
- Use meta.xml to expose LWCs on Lightning Record, App, and Home pages.
- Create CSS styling in LWC for proper display of embedded Visualforce content.
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 Salesforc e.