Trying to change Vue compilerOptions breaks my Ionic Vue app

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 => {
      .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!