How to declare native custom element?

[ADamCarraway]

[Vue warn]: Failed to resolve component: ion-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I try to do it like this but it doesn't work

setup({el, App, props, plugin}) {
        const VueApp = createApp({render: () => h(App, props)});
        VueApp.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-');
        return VueApp.use(plugin)
            .use(VueTextareaAutosize)
            .use(ElementPlus)
            .use(VueClipboard)
            .use(moment)
            .component('Link', Link)
            .component('Head', Head)
            .mount(el);
    },

[RobertBoes]

https://vuejs.org/api/application.html#app-config-compileroptions

Important

This config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser). If you are using the runtime-only build with a build setup, compiler options must be passed to @vue/compiler-dom via build tool configurations instead.

So you might have to configure it using your build tool, with Laravel Mix it might be something like the following (not sure, have not tested this):

mix.vue({
  version: 3,
  options: {
    compilerOptions: {
      isCustomElement: tag => tag.startsWith('ion-')
    },
  },
})

[ADamCarraway]

thanks!