style: Enforce kebab-cased components

gabe565 · Dec 22, 2024 · 8cbea15 · 8cbea15
1 parent fd3eaf4
commit 8cbea15
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 20 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -19,6 +19,7 @@ export default [
     rules: {
       "no-unused-vars": ["error", { varsIgnorePattern: "^_", argsIgnorePattern: "^_" }],
       "vue/no-template-shadow": "off",
+      "vue/component-name-in-template-casing": ["error", "kebab-case"],
     },
   },
 ];
diff --git a/src/App.vue b/src/App.vue
@@ -28,7 +28,7 @@
 
       <template #append>
         <div class="d-flex overflow-hidden">
-          <GitHubButton />
+          <github-button />
         </div>
       </template>
     </v-navigation-drawer>
@@ -48,7 +48,7 @@
       </template>
     </v-bottom-navigation>
 
-    <UpdateSnackbar />
+    <update-snackbar />
 
     <v-main>
       <span id="content" class="anchor" />
@@ -67,7 +67,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 import { computed, onBeforeMount } from "vue";
 import UpdateSnackbar from "./components/UpdateSnackbar.vue";
-import GitHubButton from "./components/NavButtons/GitHubButton.vue";
+import GithubButton from "./components/NavButtons/GithubButton.vue";
 
 const { smAndDown: isMobile } = useDisplay();
 

diff --git a/src/components/NavButtons/GitHubButton.vue → src/components/NavButtons/GithubButton.vue b/src/components/NavButtons/GitHubButton.vue → src/components/NavButtons/GithubButton.vue
diff --git a/src/layouts/ConvertersPage.vue b/src/layouts/ConvertersPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <v-row v-if="error">
       <v-col>
         <v-alert type="error">{{ error }}</v-alert>
@@ -11,7 +11,7 @@
         <slot />
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>

diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
@@ -6,7 +6,7 @@
       </v-btn>
     </template>
     <template #append>
-      <GitHubButton v-if="isMobile" />
+      <github-button v-if="isMobile" />
     </template>
   </v-app-bar>
 
@@ -27,7 +27,7 @@
 <script setup>
 import AppIcon from "~icons/mnemonic-ninja/logo";
 import { useDisplay } from "vuetify";
-import GitHubButton from "../components/NavButtons/GitHubButton.vue";
+import GithubButton from "../components/NavButtons/GithubButton.vue";
 
 const { smAndDown: isMobile } = useDisplay();
 </script>
diff --git a/src/views/AboutPage.vue b/src/views/AboutPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description>
       The
       <a href="https://en.wikipedia.org/wiki/Mnemonic_major_system" target="_blank"
@@ -29,7 +29,7 @@
             >Wikipedia page</a
           >, here are the numbers and their corresponding sounds:
         </p>
-        <RulesTable />
+        <rules-table />
       </v-col>
     </v-row>
     <v-row tag="section">
@@ -126,7 +126,7 @@
         </p>
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description>
       The
       <a href="https://en.wikipedia.org/wiki/Mnemonic_major_system" target="_blank"
@@ -36,7 +36,7 @@
         />
       </v-col>
     </v-row>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup>

diff --git a/src/views/InteractiveConverter.vue b/src/views/InteractiveConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid" @submit.prevent>
       <v-container>
         <v-row>
@@ -52,7 +52,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>

diff --git a/src/views/NotFoundPage.vue b/src/views/NotFoundPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <PageLayout>
+  <page-layout>
     <template #description> Oh no! The requested file could not be located. </template>
-  </PageLayout>
+  </page-layout>
 </template>
 
 <script setup lang="ts">

diff --git a/src/views/NumberConverter.vue b/src/views/NumberConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid">
       <v-container>
         <v-row>
@@ -56,7 +56,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>

diff --git a/src/views/WordConverter.vue b/src/views/WordConverter.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConvertersPage>
+  <converters-page>
     <v-form v-model="valid">
       <v-container>
         <v-row>
@@ -61,7 +61,7 @@
         </v-row>
       </v-container>
     </v-form>
-  </ConvertersPage>
+  </converters-page>
 </template>
 
 <script setup>