Use Lightning Component in Visualforce Page

Component Name:- "LCForComp"
<aura:component >
<h2 >Hello! Lightning Component Example!!!</h2>
<br/>
<button class="slds-button slds-button_brand" onclick="{!c.showAlert}">Click Button</button>
</aura:component>
Lightning Component Controller.js
({
showAlert : function(component, event, helper) {
alert('Test Alert!!!!');
}
})
Ligtning Application:- "LCForApp"
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:LCForComp"/>
</aura:application>
Visual Force Page:- "VFPageWithLC"
<apex:page showHeader="false" sidebar="false">
<apex:includeLightning />
<div id="ComponentId" />
<script>
$Lightning.use("c:LCForApp", function() {
$Lightning.createComponent("c:LCForComp",{},"ComponentId",function(component){
console.log("Component is created!");
console.log(component);
});
});

</script>

</apex:page>
Output:-

Leave a Reply