Embedding Lightning Component in Visual Force

Question

As an exercise I have developed a lightning app which replicates the standard related list functionality in a lightning page. I had put this app in an iframe in a visual force page so it looked like a standard related list. It worked quite well until Winter 16 has been released. I saw that there is a recommendation for embedding lightning on vf pages since winter 16. - "Add Lightning Components to Visualforce Pages"

This is how the page looked like with the iFrame:

This is how it looks like now using the Lightning.Use function:

MY VF Code is:

<script>
    $Lightning.use("c:AssetList", function() {
        $Lightning.createComponent("c:ListView"
        ,{}
        ,"lightning"
        ,function(component){console.log("create comp");});
    });
</script>

My lightning app code is:

The problem is that the css and the references to custom labels has been broken. Is there any special css consideration I need to care for when using this functionality or is anything wrong with my code?

Answer 1

This is because you do not have either;

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

OR

<apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css">

Include these imports in your VF page.

Also please make sure you have the correct SLDS resources are configured and referred accurately.

Answer 2

. Remove the vf, it should work fine I was trying to say that I had a similar issue when I was using a sales path lightning component in a visualforce page and I solved it by removing the vf on the apex stylesheet value, I hope it helps