Steps to Add a Lightning Component in a Visualforce Page

Posted by Vinay Vernekar 19th October 2025

Introduction

Embedding a Lightning component inside a Visualforce (VF) page is a common requirement when migrating UI pieces to the Lightning framework or when you need Lightning functionality on legacy VF pages. The most reliable approach is to use Lightning Out. This guide explains step-by-step how to add a Lightning (Aura) component to a Visualforce page, plus code examples, prerequisites, and troubleshooting tips.

Prerequisites

Before you start, ensure the following:

  • My Domain is enabled for your org.
  • You have a Lightning component (Aura) that is set with access="GLOBAL" so it can be used outside of Lightning Experience.
  • Lightning Out is supported and enabled in your org.

Option 1 — Using Lightning Out (Recommended for Aura Components)

Steps:

  1. Create an Aura component (e.g., c:myComponent) that you want to render in the VF page. Keep it modular and expose attributes needed from VF.
  2. Create an Aura application to use with Lightning Out. The app must have access="GLOBAL" and include any required dependencies (like force:slds if you want SLDS).

Example Aura application (c:myLightningApp.app):

<aura:application extends="force:slds" access="GLOBAL">
<aura:dependency resource="markup://c:myComponent" />
</aura:application>

  1. Add the Aura component with a public attribute if you want to pass data from VF. Make sure attributes are documented and have default values where appropriate.
  2. Create the Visualforce page and use <apex:includeLightning/> plus $Lightning.use and $Lightning.createComponent to bootstrap the Lightning app and instantiate the component.

Example Visualforce page:

<apex:page showHeader="true" sidebar="false" standardController="Account" >
<apex:includeLightning/>

<div id="lightning" />

<script>
// Use your app namespace: c:myLightningApp
$Lightning.use("c:myLightningApp", function() {
// Create the component c:myComponent and pass attributes
$Lightning.createComponent(
"c:myComponent",
{ "recordId": "{!Account.Id}" },
"lightning",
function(component) {
console.log('Lightning component created in VF');
}
);
}, 'https://'+window.location.hostname);
</script>
</apex:page>

Option 2 — Lightning Web Components (LWC) via Lightning Out

Salesforce now supports using LWC with Lightning Out in many cases, but the pattern and limitations differ from Aura. If you plan to embed LWC, verify your org support and follow the official documentation. The same basic flow applies: create an Aura app wrapper that can host the LWC, expose required configuration, then instantiate via $Lightning.createComponent or by creating an Aura wrapper that renders the LWC.

Important Notes & Troubleshooting

  • My Domain: Lightning Out requires My Domain. If not enabled, authentication and resource loading will fail.
  • Access attribute: Ensure the app and component use access="GLOBAL" so they can be referenced externally.
  • Static Resources & CSP: If your component relies on external scripts/styles, host them as static resources and add required CSP exceptions via Remote Site Settings or CSP Trusted Sites where necessary.
  • Cross-origin requests: When using Lightning Out from a VF hosted on a different domain (or iframes), ensure the correct host is passed to $Lightning.use and that there are no cross-domain policy issues.
  • Console logs & network tab: Use browser dev tools to inspect network requests for the Lightning framework and check for 403/404 issues.

Summary

Embedding a Lightning component in a Visualforce page is straightforward with Lightning Out: create a GLOBAL Aura app that depends on your component, include the Lightning scripts in VF using <apex:includeLightning/>, and use $Lightning.use and $Lightning.createComponent to instantiate the component. Verify My Domain, access settings, and any CSP/static resource requirements before going live.