vueCLIで作ったファイルで、viewsという階層に新しくNew.vueというコンポーネントを作ったらエラーがでました。

Question

vue.jsでvueCLIで新しくファイルを作り、viewsという階層にNew.vueというコンポーネントファイルを作ったらエラーになりました。

views
→AboutView.vue
→HomeView.vue
→New.vue

エラー内容は
Component name "New" should always be multi-word vue/multi-word-component-names
という内容です。

以下がindex.jsファイルです。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" / '../views/AboutView.vue')
},
{
path: '/new',
name: 'new',
component: () => import(/ webpackChunkName: "new" */'../views/New.vue')
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

わかる方ご教授お願いします。

Answer 1

vue/multi-word-component-namesというルールは、Vue コンポーネントの名前には複数のワードを用いましょうというものです。 NuxtLogoは、NuxtとLogoの複数ワードを用いているため OK ですが、Tutorialやindexなど単体名のコンポーネントはエラーとなります。

引用元
このエラーを無視する方法が引用元に記載されているのでぜひ参考にしてみてください!

Comments

[green66]

回答ありがとうございます。NuxtLogoという様にNewView.vueとしたところ上手くいきました。
エディタの再起動が必要でした。
サイト参考にいたします。ありがとうございました。

[george]

先日同じエラーが出た時に調べていたので、それが役に立ったなら良かったです！

[green66]

とても助かりました。ありがとうございます。