Showing a Lightning Component/App inside Visualforce Page

Question

Is it possible to show a Lightning Component/App inside a Visualforce Page??

Answer 1

Hope this helps. I just had superb results embedding my entire component with Salesforce data tables,html, etc. into a visualforce page...not just a button calling a js script.

Step 1: your aura application should be global and extend ltng:outApp:

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

Step 2: add a dependency to your application:

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

Step 3: In your visualforce page:

<apex:includeScript value="/lightning/lightning.out.js" />

Step 4: In your visualforce page:

<div id="lightning" />

    <script>
        $Lightning.use("c:MyApp", function() {
          $Lightning.createComponent("yourNamespace:MyAuraLgtComponent",
          { label : "" },
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>

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.

Answer 2

In Winter '16 you can use Lightning Components for Visualforce (LC4VF) to embed Lightning Components directly into a Visualforce page. Look for more on this starting next week at Dreamfoce.

Also, please don't use iFrames to embed Lightning Apps in Visualforce. This will be blocked starting in Winter '16, and there is no workaround, setting, etc. as this is a requirement from product security.

Answer 3

Thanks, @VamsiKrishna. Somehow, i missed to look into FAQs, so currently this is not feasible to embed Visualforce / LightningComponent into each other.

Ref: https://developer.salesforce.com/page/Lightning_FAQ#Visualforce_and_Lightning

Answer 4

From winter16 you can.

Plz follow this link for reference.

http://forcewizard.com/blog/expose-your-lightning-components-visualforce-page