How to Add LWC to lightning App Builder

Question

I created one simple LWC component and when I tried to add it in Lightning App Builder I'm not able to see it. So how to add LWC in lightning app builder.

Answer 1

To make an LWC available in the app builder you will have to set the correct values in the configuration file of the component.

You can find all the details on this link: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_for_app_builder

Answer 2

First you need to in target tag where you want to expose your component in meta.xml file like below -

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>45.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

And then in visual studio, right click on component folder name and select "SFDC: Deploye source to org" command. After deploy it will be visible in app builder.

Answer 3

Ensure <isExposed>true</isExposed> is set correctly, or else it will not show in Lightning App Builder.