Hey guys,
I am trying to implement my Stencil project into an Ionic Vue app and am completely pulling my hair out. The problem is as follows:
Out of the box, Vue treats all custom components as Vue components. Thus, I get the Vue warning that it can’t resolve my web-components.
To resolve this problem, we have to tell the Vue instance that components with a certain prefix are NOT Vue components. To achieve this, the Stencil docs on framework integration with Vue told me I have to change a config setting on my Vue instance with: Vue.config.ignoredElements = [/gc-\w*/];. This is great if you use Vue 2, but Ionic Vue apps use Vue 3.
According to the Vue 3 docs, you can do something similar in version 3, only you have to use the compilerOptions of the Vue instance to do it: app.config.compilerOptions.isCustomElement = tag => /gc-\w*/.test(tag)
When I try this solution however, Vue starts complaining that you can only set the compilerOptions this way when using the full build of Vue. When you use the runtime-only build (which Ionic apparently uses?) you have to change any settings at runtime.
After a lot of frustration and Googling I finally figured out how to change the compilerOptions at runtime. I created a vue.config.js and it contains the following:
module.exports = {
configureWebpack: {
resolve: { symlinks: false }
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions = {
...(options.compilerOptions || {}),
isCustomElement: tag => /gc-\w*/.test(tag)
};
return options;
});
},
}
This gave me the following error when I try to run yarn serve: Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined.
I FINALLY managed to resolve the issue by installing vue-loader@next. When I could now yarn serve and work on my Ionic app.
However, when I want to use the Vue 3 Composition API I run into problems. I keep getting errors like: Module '"../../node_modules/vue/dist/vue"' has no exported member 'toRefs'..
This seems to have something to do with the Vue version that vue-loader@next wants as a peer dependency. Because when I remove it, it goes back to the Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined error.
What am I doing wrong here? Is this not the correct way to implement Stencil components in an Ionic Vue project? I feel like I am running in circles here. Any help would be greatly appreciated!