Add or Embed a Lightning Component in a Visualforce Page Salesforce

In this post, I am going to explain, how to refer a Lightning Component in Visualforce. 

Let consider, You have created a Lightning component using aura:component tag and want to add/embed this in visualforce page. The below example will help you to achieve this scenario.

Step 1:
I am using the below sample Lighting Component for demo purpose.

http://salesforcekings.blogspot.in/2015/11/lightning-component-styles-and-usage.html

Step 2:

Create a Lighting application named as "SampleLightningApp" with the below code snippet,

1. <aura:application extends="ltng:outApp">
2.     <aura:dependency resource="c:*" type="COMPONENT"/>
3. </aura:application>

IMPORTANT:
1. You need to extend a app with "ltng:outApp" in order to access in visualforce page.
2. aura:dependency should be included on the app with resource attribute. This will give an access to a components. 
3. In the above app, aura:dependency tag declared with resource attribute and "c" is default namespace and "*" matches everything in the namespace.
4. You can also declare "TYPE" attribute with the value of (COMPONENT, APPLICATION and EVENT) in dependency tag. Default value is COMPONENT.

Step 3:
Create a visualforce page with the below code snippet,

1. <apex:page showHeader="false" sidebar="false">
2.  <!-- This loads the JavaScript file needed to use Lightning Components for Visualforce-->
3.     <apex:includeLightning />
4. 
   
5.     <!-- div tag act as locator while calling Lightning.createComponent -->
6.     <div id="lightning" />
7.  
8.     <script>
9.  
10.         $Lightning.use("c:SampleLightningApp", function() {
11.           $Lightning.createComponent("c:StyleComponentWithImage",
12.           "",
13.           "lightning",
14.           function(cmp) {
15.             // do some stuff
16.           });
17.         });
18.  
19.     </script>
20. </apex:page>

IMPORTANT:
1. Added <apex:includeLightning /> at the beginning of your page. This loads the JavaScript file needed to use Lightning Components for Visualforce.

2. To use Lightning Components for Visualforce, you need to reference a Lightning app. It can be reference with $Lightning.use.

3. In the above code, "c:SampleLightningApp" is the lightning app name. "C" denotes the default namespace.

4. To refer or create a new lighting component from visualforce page, Use $Lightning.createComponent. Here is the Syntax ,

$Lightning.createComponent(String type, Object attributes, String locator, function callback).

5. "c:StyleComponentWithImage" refers the existing Lightning component page. 

6. Lightning component contents are now embedded with Visualforce page. Save and run the vf page as usual.

References:

Add Lightning Components to Visualforce Pages

aura:dependency