CODEWITHSUNDEEP
vue.jsvue-routereslint
Michael Johnston
Michael Johnston

Reputation: 5320

[Vue warn]: Unknown custom element: <RouterView> (with plugin:vue/recommended eslint rules)

I recently started linting my Vue CLI 3 project with plugin:vue/recommended eslint plugin.

One of the rules is vue/component-name-in-template-casing with the default being PascalCase, but when <router-view /> is autofixed to <RouterView /> I get a runtime error:

[Vue warn]: Unknown custom element: <RouterView> - did you register the component correctly?

I (think I) do like the pascal-cased names better; how can I resolve this?

Upvotes: 2

Views: 619

Answers (1)

Phil
Phil

Reputation: 164881

You need to be using vue-router v3.0.2+.

package.json

"dependencies": {
  "vue-router": "^3.0.2"
}

The differences can be seen in the install.js file...

Version 3.0.1 (and before) has...

Vue.component('router-view', View)

Whereas version 3.0.2 changed it to

Vue.component('RouterView', View)

The problem with the older format is that it explicitly registers only the <router-view> component whereas the latest version is able to handle either kebab or Pascal cased component names in your templates.

From the v3.0.2 release notes...

RouterLink and RouterView can now be used in PascalCase (#1842)

Upvotes: 4

Related Questions