Lightning Components for Visualforce is based on Lightning Out (Beta), a powerful and flexible feature you can use to embed Aura Component and Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App.

In this blog, we’ll walk through a simple step-by-step guide to call an Aura component inside a Visualforce page using Lightning Out, along with explanations of why we need each step.

Step-by-Step Guide to Call an Aura Component in a VF Page

There are three steps to add Aura components to a Visualforce page.

1. Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
2. Create and reference a Lightning Out app that declares your component dependencies.
3. Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

Let’s create a simple demo where we display a greeting message and let users update their name via input.

Step 1: Create a Simple Aura Component

Go to Developer Console → File → New → Lightning Component → Name: SimpleGreeting

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <aura:attribute name="name" type="String" default="World"/>

    <div class="slds-box slds-theme_default">
        <h1 class="slds-text-heading_medium">Hello, {!v.name}!</h1>
        <lightning:input label="Enter your name" value="{!v.name}" />
    </div>
</aura:component>

• implements="force:appHostable" makes the component usable inside a Lightning app.
• We define a name attribute and bind it to an input field and heading.

Step 2: Create a Lightning App

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

• Lightning Out requires an app to bootstrap and load Aura components.
• extends="ltng:outApp" makes the app compatible with Lightning Out.
• access="GLOBAL" allows the app to be used outside the Lightning Platform.
• <aura:dependency resource="c:SimpleGreeting" /> ensures the app loads your component.

Step 3: Create the Visualforce Page

Go to Setup → Visualforce Pages → New → Name: SimpleGreetingVFPage

<apex:page>
   
    <apex:includeLightning />

   
    <div id="auraContainer"></div>

    <script>
        
        $Lightning.use("c:SimpleGreetingApp", function() {
            // Create the component and inject it inside the auraContainer div
            $Lightning.createComponent(
                "c:SimpleGreeting",
                {},  
                "auraContainer",
                function(cmp) {
                    console.log("Aura component loaded successfully!");
                }
            );
        });
    </script>
</apex:page>

• <apex:includeLightning /> injects the necessary JS files for Lightning to run.
• $Lightning.use() tells Salesforce which app to use to initialize components.
• $Lightning.createComponent() actually loads your component into the specified HTML container.

Final Output

When you open the VF page in the browser, it will load the Aura component inside it, and you’ll see:

Conclusion

In other ways, using Lightning Components for Visualforce is identical to using Lightning Out. See Use Components Outside Salesforce with Lightning Out (Beta) in the Lightning Web Components Developer Guide.

You can deepen your understanding of Data Cloud by exploring our comprehensive course on Salesforce Data Cloud and Agentforce – Building Agents and also check out our latest blogs on our websites for additional knowledge about salesforce.