Vue3 isCustomElement seems not working and vue router clash with custom element

Question

I have VUE3 app with vue-router using third party web components imported as custom elements, I set the isCustomElement option to ignore custom element, but it seems not to be taken into account.

I set the "vue": { "runtimeCompiler": true } in package.json.
I set app.config.isCustomElement = (tag) => tag.startsWith('bdl-') to ignore customElements in main.js
I use web components - custom elements starting with bdl- in About.vue:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <bdl-fmi></bdl-fmi>
    <bdl-range></bdl-range>
    <bdl-chartjs-time></bdl-chartjs-time>
  </div>
</template>

However, it seems that it's not taken into account and the browser console log contains warning [Vue warn]: Failed to resolve component: bdl-fmi and custom elements fails to render in router view.

Tried VUE2 and the configuration Vue.config.ignoredElements = ['bdl-chartjs'] is working and similar application with vue-router do not try to interpret third party custom elements and renders as expected.

Any thoughts on isCustomElement will be appreciated.

Sample with this issue can be seen at CODESANDBOX: https://codesandbox.io/s/vue-3-router-with-bodylightjs-components-h8v50

tony19 tony19 · Accepted Answer · 2021-05-03T16:41:26

The app.config.isCustomElement flag is intended for projects that use the runtime compiler, which could be enabled in a Vue CLI project via the runtimeCompiler flag in vue.config.js:

// vue.config.js
module.exports = {
  runtimeCompiler: true,
}

But you could also resolve this without the runtime compiler by removing app.config.isCustomElement, and configuring vue-loader directly:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag.startsWith('bdl-')
        }
        return options
      })
  }
}

Vue3 isCustomElement seems not working and vue router clash with custom element

1 Answers