Discussion on: How to use Ionicons v5 with Vue.js

[Andreas]

Should be similar in Vue3, except ignoredElements is now isCustomElement. Also you need to distiguish between on-the-fly compilation and pre-compilation. This page in the docs should help you.

On-the-fly example:

const app = Vue.createApp({});
app.config.isCustomElement = tag => tag.startsWith('ion-');

Webpack example in vue.config.js:

module.exports = {
    chainWebpack: config => {
        config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
            options.compilerOptions = {
                ...(options.compilerOptions || {}),
                isCustomElement: tag => /^ion-/.test(tag)
            };
            return options;
        });
    }
}