Vue: [Vue warn]: Do not use built-in or reserved HTML elements as component id: input

[avivsalman]

Version

2.5.13

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Steps to reproduce

i dont have any example, i cant register any of component, please ignore the website example.

when i am runnig in dev mode with webpack, i get this error:
but the component name is dp-input:

import:
import dpInput from './../components/inputs/Input'

components: {
dpInput
},

in template:
dp-input(v-model="data")

What is expected?

No Error need to be here because its not saved html Element

What is actually happening?

get an error

[psimyn]

does the component exported from ./../components/inputs/Input have a name property of 'input'? Looks like it might have, e.g.

export default {
  name: 'input',
  ...
}

if you aren't able to change the components/inputs/Input file, you could override the name using Vue.extend

[fnlctrl]

Hi, thanks for filling this issue.
If your repro can't be put in jsfiddle, you can try using a github repo or https://codesandbox.io. Thanks!

[avivsalman]

Thank You, you right, I just changed the name 👍

[JounQin]

I'm also getting this warning when using name Image, which is marked as reserved tag name in isSVG(https://github.com/vuejs/vue/blob/master/src/platforms/web/util/element.js#L31), so why HTML tags are not transformed into lower case but SVG tags are?

@fnlctrl @yyx990803 Should they be consistent?

[sina-GitHub]

change the "name" of the component to a non reserved HTML tag name in "export default" section of Vue file...

a wrong exmaple :

export default {
  name: "div",// div is "not a valid" name, because it's a reserved HTML tag
};

a True exmaple :

export default {
  name: "valid_name",// OK
};

[abdessamadelhamdany]

Try giving it a capitalize name example will be

name: "Header", instead of name: "header",