Use Lightning Components in Visualforce Pages

 

Use Lightning Components in Visualforce Pages:

We can add Aura components to our Visualforce pages to combine features we have built using both solutions. We can implement new functionality using Aura components and then use it with existing Visualforce pages.

Steps:

• Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component. ( <apex:includeLightning/> to be added at the beginning of your page which loads the JavaScript file used by Lightning Components for Visualforce.)
• Create and reference a Lightning app that declares your component dependencies.
• Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

Create and Reference a Lightning Dependency App :

Lightning Dependency App:

<aura:application access="GLOBAL" extends="ltng:outApp"> 

    <aura:dependency resource="lightning:button"/>

</aura:application>

Creating a Component on a Page :

Page:

<apex:page>

    <apex:includeLightning />

   <div id="lightning" />

    <script>

        $Lightning.use("c:testing", function() {

          $Lightning.createComponent("lightning:button",

              { label : "click!" },

              "lightning",

              function(component) {

                console.log("button was created");

                //something

              }

          );

        });

    </script>

</apex:page>

Reference(s): https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm