Include Lightning Component in Visualforce Page

Yes, it's possible now.

We can put our Lightning Component inside Visualforce page, it would help us to combine features we have built using both VF and Lightning Component.

Basically we have four steps to add lightning component to a Visualforce Page.

Step 1:

a) Create simple lightning aura application and make it global and extend ltng:outApp , now save this app as "MyLightningApp"

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

b) Create a component and save it as "MyLightningCmp".

<aura: component>

Test - We are inside component now!!

</aura:component>

Step 2:

Add a dependency to our application,

The app uses the <aura:dependency> tag to indicate that it uses the standard Lightning component, such as ui:button and Custom Component in our case "MyLightningApp"

Note: If the app is defined in your org (that is, not in a managed package), you can use the default “c” namespace instead, as shown in the next example. If your org doesn’t have a namespace defined, you must use the default namespace.

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

Step 3:

In our Visualforce page add this tag in the beginning, it loads the JavaScript file used by Lightning Components for Visualforce.

<apex:includeLightning />

Step 4:

In your Visualforce page:

$Lightning.createComponent(String type, Object attributes, Stringlocator, function callback)->

This function is similar to $A.createComponent(), but includes an additional parameter,domLocator, which specifies the DOM element where you want the component inserted.

<apex:page>

<div id="lightning" />

<script>

$Lightning.use("c:MyLightningApp", function() {  $Lightning.createComponent("c:MyLightningCmp",

{ label : "" },

"lightning",

function(cmp) {

alert('function called');

}

);

});

</script>

</apex:page>

Make sure that the component you are creating with $Lightning.createComponent() has the same name as the component you would like to display on the visual force page.

This code creates a DOM element with the ID “lightning”, which is then referenced in the $Lightning.createComponent()method. This method creates ‘MyLightningCmp’ component inside DIV with Id “lightning”, and then executes the callback function.