Avoid Vue warn when using custom tags

Question

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.

tony19 · Accepted Answer · 2022-07-14 23:50:23Z

3

You can use v-pre attribute on your component

<material-button v-pre> </material-button>

https://v2.vuejs.org/v2/api/#v-pre

or you can use ignoredElements

Vue.config.ignoredElements = [
    "material-button"
]

https://v2.vuejs.org/v2/api/#ignoredElements

edited Jul 14, 2022 at 23:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 20, 2020 at 12:17

Owl

6,9033 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chumpocomon Over a year ago

Awesome Owl. Finally my HTML is more meaningful with the custom tags and I can avoid long dividities with so many classes.

Sami Salih İbrahimbaş · Accepted Answer · 2022-02-21 07:09:34Z

0

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
      })
  }
}

answered Feb 21, 2022 at 7:09

Sami Salih İbrahimbaş

3294 silver badges7 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Hackerbyday · Accepted Answer · 2022-03-21 12:07:34Z

0

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",

answered Mar 21, 2022 at 12:07

Hackerbyday

1014 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 03:37:38Z

0

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

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

edited Jul 16, 2022 at 3:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 20, 2020 at 12:18

Dipyamanbiswas

713 bronze badges

Collectives™ on Stack Overflow

Avoid Vue warn when using custom tags

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related