How to include lightning component in visual force page

Solution:

Step 1: create lightning component as shown below.

TestCompInPage.cmp

<aura:component >

Lightning Component Successfully loaded into visual force Page

</aura:component>



Step 2: create a lightning app by extending ltng:outApp as shown below

AppInVfPage.app:

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

<aura:dependency resource="c:TestCompInPage"/>

</aura:application>



Step 3: create the visualforce page as shown below.

<apex:page showHeader="false" sidebar="false">

    <apex:includeLightning />

    <div id="lightning" />

    <script>

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

             $Lightning.createComponent("c:TestCompInPage",

          { label : "" },

          "lightning",

          function(cmp) {

          });

        });

    </script>

</apex:page>

Output: