How to use Lightning lookup component in PageBlcoksection of VF Page?

Question

I have created a lightning lookup component using below link

ReUsable custom Lightning component

But I need to be placed this into PageBlock section of VF Page.

<apex:pageBlockSection title="Contact Role" id="pbs" collapsible="false">
             <apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Account__c}"  />
             <apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Contact__c}" />
             <apex:inputField value="{!contactRole.Role__c}" required="true"  />
             <apex:inputField value="{!contactRole.ActiveStatus__c}" />
             <apex:inputField value="{!contactRole.Start_Date__c}" />
             <apex:inputField value="{!contactRole.End_Date__c}" />
             <apex:inputField value="{!contactRole.Primary__c}" />
        </apex:pageBlockSection>

In above VF Page, we need I need the created lightning component in the place of

 <apex:inputField styleClass="slds-lookup__search-input" value="{!contactRole.Contact__c}" />

I am not sure How to use the Custom lookup component as Input Field of PageBlock section

1) Created Child Component customLookupResult.cmp For Display the Search Result List

2) Created Lightning Custom Lookup Component [Parent]customLookup.cmp

3) created one app Lookuptestapp.app and again I created App as said with extends="ltng:outApp" Lookupcmpapp.app

Now i confusing which App Name should I give at $Lightning.use("c:lcvfTest", function() {
which component name should I give at $Lightning.createComponent("ui:button",

Lookuptestapp.app:

<aura:application extends="force:slds" access="GLOBAL">
 <aura:attribute name="selectedLookUpRecord" type="sObject" default="{}"/>
 <c:customLookup objectAPIName="Contact" IconName="standard:Contact" 
 selectedRecord="{!v.selectedLookUpRecord}" label="Contact Name"/>
 </aura:application>


Lookupcmpapp.app:

<aura:application access="GLOBAL" extends="ltng:outApp"> 
<aura:dependency resource="ui:button"/>
</aura:application>   

What should I give at resource attribute and How to use it?

Answer 1

Instead of using lighting component I would suggest to use : apex:inputField

<apex:inputField value="{!object.fieldname}"/>

But if you are wondering how to use lightning comonents in VF page below information should work for you.

You cannot use lightning components directly on the vf page, you need to create a lightning out app, and then you can add that app on VF page, in that app you can add any lighting component that you want.

Sample lightining out app code below, extends="ltng:outApp" enables lighting out to the app.

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="ui:button"/>
</aura:application>

Extending from ltng:outApp adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don’t want SLDS resources added to the page, extend from ltng:outAppUnstyled instead

Sample code for VF page

<apex:page>
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:lcvfTest", function() {
          $Lightning.createComponent("ui:button",
          { label : "Press Me!" },
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

Your component will be rendered in the div with id="lightning".

 $Lightning.createComponent("ui:button",
              { label : "Press Me!" },

Above line creates component, and sets attribute with name 'label', you can add your own component here.

Reference