[Vuejs]-How to register custom components in Vue3?

by

0👍

  1. Make sure you have the following <script> tags in your public/index.html:
 <script type="module" 
 src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"> 
 </script>
 <script nomodule 
 src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Try adding this line in your main.js, as this will ignore all components with an ion- prefix:

Vue.config.ignoredElements = [/^ion-/]

Take a look at: https://dev.to/devmount/how-to-use-ionicons-v5-with-vue-js-53g2

👤Luciano

0👍

In vite.config.js you need to add this into ‘ plugins[]’ (in my case I used ‘v-list-item-icon’:

vue({ 
    template: { 
        transformAssetUrls,
        compilerOptions: {
            isCustomElement: (tag) => ['v-list-item-icon'].includes(tag),
       
        }
    }
}),
👤Kristian Borriello

-1👍

Is this the answer you looking for? Usually I meet this warning just add the component and the warn will be fixed. write on your vue page

import {IonIcon} from '@ionic/vue';
export default defineComponent({
  compontents:{
   IonIcon
  }
})
👤Meow

Leave a comment