<apex: includeLightning> Component in Visualforce Page

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:

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:

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>

Output