Following the usage at https://ionicons.com/usage, the ion-icon
displays but I get this warning:
Failed to resolve component: ion-icon
My steps were:
@vue/cli@4.5.11
to create a new app (vue create projectname
)<ion-icon name="heart"></ion-icon>
to HelloWorld.vue
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
to public/index.htmlI've tried app.config.isCustomElement = tag => tag.startsWith('ion')
which created another warning saying the option is only respected when using the runtime compiler, but I was able to suppress it by adding a vue.config.js
with module.exports = {runtimeCompiler: true}
. No effect on the ion-icon
warning. This might be linked to needing to use a custom vue-loader but is there an easy way to get rid of this warning?
The full warning from using app.config.isCustomElement
provides a useful clue:
The
isCustomElement
config option is only respected when using the runtime compiler. If you are using the runtime-only build,isCustomElement
must be passed to@vue/compiler-dom
in the build setup instead- for example, via thecompilerOptions
option in vue-loader: https://vue-loader.vuejs.org/options.html#compileroptions.
You could modify vue-loader
's compilerOptions
in vue.config.js
to configure isCustomElement
:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => tag.startsWith('ion-')
}
return options
})
}
}