Avoid Vue warn when using custom tags

user_12361834 0
Viewed 266

I'm getting an error when I'm trying to use custom tags like this:

<material-button>Ok</material-button>

It's not a real component, just semantic HTML with a specific CSS. However, I'm getting this Vuew error:

 [Vue warn]: Unknown custom element: <material-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

Can I avoid this error without having to create and register <material-button> as a component?

Note: everything works perfectly is just that [Vue warn] that pops up in the console all the time.

vuejs2 vue.js tags html javascript
4 Answers
user_123972500

You cannot disable warnings on a per component basis as per Linus_Borg

However you can use Vue.config.silent to suppress all warnings

user_38836340

you can check the solution here: Vue warn Failed to resolve component: ion-icon

if you want tot past and pass, update vue.config.js like


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

I solved this in my webpack config, by applying these options to the vue-loader:

  {
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
      cacheBusting: false, // true by default (:
      compilerOptions: {
        isCustomElement:  (tag) => tag === "lottie-player",
      },
    },
  },

By doing this I don't get any warnings when using

<lottie-player></lottie-player>

in my components.

My setup is:

"vue": "^3.2.31",
"vue-loader": "^16.2.0",
"webpack": "^5.53.0",
user_95186380
Related