Use Lightning Component In VF Page

In this blog we will see how we can use the lightning component in visualforce page.
As a first step lets create a lightning component which takes account Id as input and display the Account Id in lightning component.

Lightning Component :-










Once the lightning component is created, we need to create a lightning app which will contain the component. The lightning app should have "ltng:outApp" interface. This interface makes the lightning app visible on visualforce page.

Lightning App :-

Once the lightning app is created, lets create a visualforce page that will display the lightning app. Below is the screenshot of the page.

In the above code, we are using <apex:includeLightning/> which enables the inclusion of lightning app on visualforce page. also there should be an empty div element which will contain the lightning component.
Once the page is loaded, we use $Lightning.use to load the lightning application. Then we use $Lightning.createComponent to initialize the lightning component dynamically in the page. During component initialization we pass 4 parameters ie :

1. In the first parameter Lightning component name.
2. In the second parameter we will assign the values to lightning component attributes.
3. In 3rd parameter we give the div section where we need to display the component.
4. In 4th parameter we will define a function that fires once the component is initialized.

In the above example you can notice that we are passing the account Id to the lightning component which will be displayed in the component.
the above example shows the complete process of using the Lightning component in visualforce page.