DEV Community

loading...

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

Collapse
devmount profile image
Andreas Author

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-');
Enter fullscreen mode Exit fullscreen mode

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;
        });
    }
}
Enter fullscreen mode Exit fullscreen mode
Forem Open with the Forem app