How to get Custom Metadata Type data without Apex in Lightning Web Components(lwc)

What is Custom Metadata Type in Salesforce?
Custom metadata are like custom settings but records in custom metadata type considered as metadata rather than data.
These are typically used to define application configurations that need to be migrated from one environment to another, or packaged and installed.

You cannot perform CUD (Create, Update, Delete) operation on custom metadata type in apex.

Custom Metadata Type object suffix with __mdt

Normally in apex, we are using SOQL query to get the Custom metadata type data.

How to get the Custom Metadata Type data in Lightning web components?

To get the Custom metadata type data in the lightning web component you can use the wire service to get record data. To get the data, the Lightning Web Component uses the getRecord wire adapter.

Syntax

import { getRecord } from 'lightning/uiRecordApi';

For the demo, I created the Country and Amount(Country_And_Amount__mdt) Custom Metadata type object and records.

Country_And_Amount__mdt object

Country_And_Amount__mdt records

HTML Code

<template>
    <lightning-card title="Custom Metadata Types Record Values">
        <template if:true={objMetadataValues}>
            <dl class="slds-list_horizontal slds-wrap" style="margin-left: 3%;">
                <dt class="slds-item_label slds-truncate" title="First Name">Master Label</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.MasterLabel}</b></dd>
                <dt class="slds-item_label slds-truncate" title="Last Name">Developer Name:</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.DeveloperName}</b></dd>
                <dt class="slds-item_label slds-truncate" title="Full Name">Amount:</dt>
                <dd class="slds-item_detail slds-truncate"><b>{objMetadataValues.Amount}</b></dd>
            </dl>
        </template>
    </lightning-card>
</template>

Javascript Controller

import { LightningElement, track, wire} from 'lwc';

// import to get the record details based on record id
import { getRecord } from 'lightning/uiRecordApi';

export default class metadataDetailsInLWC extends LightningElement {

    @track objMetadataValues = {};
    
    // using wire service getting current user data
    // HardCoded the Record Id you can dynamically pass the record id using track or api decorates
    @wire(getRecord, { recordId: 'm02B00000006hGx', fields: ['Country_And_Amount__mdt.MasterLabel', 'Country_And_Amount__mdt.DeveloperName', 'Country_And_Amount__mdt.Amount__c'] })
    userData({error, data}) {
        if(data) {
            let currentData = data.fields;
            this.objMetadataValues = {
                MasterLabel : currentData.MasterLabel.value,
                DeveloperName: currentData.DeveloperName.value,
                Amount: currentData.Amount__c.value

            }
        } 
        else if(error) {
            window.console.log('error ====> '+JSON.stringify(error))
        } 
    }

}

Output