vue/component-name-in-template-casing が script setup に対応した

vuejs/eslint-plugin-vue#1934

Author: kkeisuke

.eslintrc

@@ -10,7 +10,7 @@
     "@typescript-eslint/ban-types": "error",
     "vue/no-side-effects-in-computed-properties": "error",
     "vue/html-self-closing": ["error", { "html": { "void": "always" } }],
-    "vue/component-name-in-template-casing": ["error", "kebab-case"], // script setup では動かない? https://github.com/vuejs/eslint-plugin-vue/issues/1629
+    "vue/component-name-in-template-casing": ["error", "kebab-case"],
     "vue/no-duplicate-attr-inheritance": "error",
     "vue/no-template-target-blank": "error",
     // "vue/no-unused-properties": "error", // defineProps で意図ぜず error になる

components/common/Links.vue

@@ -5,13 +5,13 @@ import SvgIcon from '@/components/common/SvgIcon.vue'
 <template>
   <aside class="flex items-center gap-2">
     <a href="https://kkeisuke.com" target="_blank" rel="noopener noreferrer" aria-label="home">
-      <SvgIcon icon="home" class="w-6 h-6" />
+      <svg-icon icon="home" class="w-6 h-6" />
     </a>
     <a href="https://github.com/kkeisuke" target="_blank" rel="noopener noreferrer" aria-label="github">
-      <SvgIcon icon="github" class="w-6 h-6" />
+      <svg-icon icon="github" class="w-6 h-6" />
     </a>
     <a href="https://twitter.com/kkeisuke" target="_blank" rel="noopener noreferrer" aria-label="twitter">
-      <SvgIcon icon="twitter" class="w-6 h-6" />
+      <svg-icon icon="twitter" class="w-6 h-6" />
     </a>
   </aside>
 </template>

pages/404.vue

@@ -8,10 +8,10 @@ const { title } = useRuntimeConfig().public
 
 <template>
   <main>
-    <ArticleBlogTitle :title="title" class="mb-10" />
+    <article-blog-title :title="title" class="mb-10" />
     <!-- path が無いと、generate 時に取得できない -->
     <ContentDoc path="/404" class="nuxt-content" tag="section" />
-    <Links class="pt-4" />
+    <links class="pt-4" />
   </main>
 </template>
 

pages/articles/[...slug].vue

@@ -26,17 +26,17 @@ article.value && useHead({
 
 <template>
   <main>
-    <ArticleBlogTitle :title="title" class="mb-10" />
+    <article-blog-title :title="title" class="mb-10" />
     <article>
       <template v-if="article">
-        <ArticleHeader :title="article.title" :date="article.date" class="mb-10" />
+        <article-header :title="article.title" :date="article.date" class="mb-10" />
         <ContentRenderer :value="article" class="nuxt-content" />
       </template>
       <template v-else>
         <ContentDoc path="/404" class="nuxt-content" tag="section" />
       </template>
     </article>
-    <Links class="pt-4" />
+    <links class="pt-4" />
   </main>
 </template>
 

pages/index.vue

@@ -16,9 +16,9 @@ useHead({
 
 <template>
   <main>
-    <BlogTitle :title="title" class="mb-4" />
-    <Links />
-    <ArticleList v-for="article in articles" :key="article._path" :article="article" class="mt-8" />
+    <blog-title :title="title" class="mb-4" />
+    <links />
+    <article-list v-for="article in articles" :key="article._path" :article="article" class="mt-8" />
     <aside class="pt-24">
       <p>2019年以前は <a href="https://kkeisuke.hatenablog.com/archive" target="_blank" rel="noopener noreferrer">はてなブログ</a> へ</p>
     </aside>