The <apex: includeLightning> is another important component used for including the lightning components for the Visualforce JavaScript library, lightning.out.js, from the correct Salesforce domain.
The <apex: includeLightning> component has the following attributes:
1. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex: includeLightning id="includeId"></apex: includeLightning>
2. rendered
The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page. The boolean value true is set as a default value to this attribute.
Syntax:
<apex: includeLightning rendered="false"></apex: includeLightning>
Let's take an example to understand how we can use the <apex: includeLightning> on the VF page:
ComponentAppToInclude.app
<!-- create a lightning app with global access that extends lightning outApp-->
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura: dependency resource="lightning: button"/>
</aura: application>
ApexIncludeLightningExample.vfp
<!-- Apex page to understand use of the <apex: includeLightning-->
<apex: page>
<apex: includeLightning />
<div id="lightning" />
<!-- use script tags to write the code for creating a lightning component in the lightning application-->
<script>
$Lightning.use("c:ComponentAppToInclude", function() {
$Lightning.createComponent("lightning:button",
{ label : "Press Me!",
variant: "brand"
},
"lightning",
function(cmp) {
console.log("button was created");
// do some stuff
}
);
});
</script>
</apex: page>
