refactor

Author: ydah

components/AppHeader.vue

@@ -1,87 +1,17 @@
 <template>
   <div>
     <v-app-bar :elevation="0">
-      <v-app-bar-nav-icon
-        class="d-flex d-sm-none"
-        variant="text"
-        @click.stop="drawer = !drawer"
-      />
+      <v-app-bar-nav-icon class="d-flex d-sm-none" variant="text" @click.stop="drawer = !drawer" />
       <template #append>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/"
-        >
-          <v-btn>Home</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/schedule"
-        >
-          <v-btn>Schedule</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/speakers"
-        >
-          <v-btn>Speakers</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/sponsors"
-        >
-          <v-btn>Sponsors</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/venue"
-        >
-          <v-btn>Venue</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/policies"
-        >
-          <v-btn>Policies</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/about"
-        >
-          <v-btn>About</v-btn>
-        </NuxtLink>
-        <NuxtLink
-          class="d-none d-sm-block"
-          to="/goodies"
-        >
-          <v-btn>Goodies</v-btn>
+        <NuxtLink v-for="(page, index) in pages" :key="index" class="d-none d-sm-block" :to="page.to">
+          <v-btn>{{ page.title }}</v-btn>
         </NuxtLink>
       </template>
     </v-app-bar>
     <v-navigation-drawer v-model="drawer">
       <v-list>
-        <NuxtLink to="/">
-          <v-list-item>Home</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/schedule">
-          <v-list-item>Schedule</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/speakers">
-          <v-list-item>Speakers</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/sponsors">
-          <v-list-item>Sponsors</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/venue">
-          <v-list-item>Venue</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/policies">
-          <v-list-item>Policies</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/about">
-          <v-list-item>About</v-list-item>
-        </NuxtLink>
-        <NuxtLink to="/goodies">
-          <v-list-item>Goodies</v-list-item>
+        <NuxtLink v-for="(page, index) in pages" :key="index" :to="page.to">
+          <v-list-item>{{ page.title }}</v-list-item>
         </NuxtLink>
       </v-list>
     </v-navigation-drawer>
@@ -92,6 +22,16 @@
 export default {
   data: () => ({
     drawer: false,
+    pages: [
+      { title: 'Home', to: '/' },
+      { title: 'Schedule', to: '/schedule' },
+      { title: 'Speakers', to: '/speakers' },
+      { title: 'Sponsors', to: '/sponsors' },
+      { title: 'Venue', to: '/venue' },
+      { title: 'Policies', to: '/policies' },
+      { title: 'About', to: '/about' },
+      { title: 'Goodies', to: '/goodies' },
+    ],
   }),
 }
 </script>

eslint.config.mjs

@@ -15,6 +15,7 @@ export default withNuxt(
       'vue/no-multiple-template-root': 'error',
       'vue/require-v-for-key': 'error',
       'vue/no-use-v-if-with-v-for': 'error',
+      'vue/max-attributes-per-line': 'off',
     },
   },
   stylistic.configs.customize({