feat: aタグではなくNuxtLinkを使用

Author: kspace-trk

dist/runtime/components/headers/SideHeader.vue

@@ -54,7 +54,7 @@ const handleMenuItemClick = (path, event) => {
             v-for="item in menuItems"
             :key="item.path"
           >
-            <a
+            <NuxtLink
               :href="item.path"
               :class="['menu-item', { active: props.currentPath === item.path }]"
               @click="handleMenuItemClick(item.path, $event)"
@@ -64,16 +64,16 @@ const handleMenuItemClick = (path, event) => {
                 class="menu-item-icon"
               />
               <p>{{ item.label }}</p>
-            </a>
+            </NuxtLink>
           </li>
         </ul>
       </div>
       <div
         v-if="bottomMenuItem"
         class="bottom-wrapper"
       >
-        <a
-          :href="bottomMenuItem.path"
+        <NuxtLink
+          :to="bottomMenuItem.path"
           :class="['menu-item', { active: props.currentPath === bottomMenuItem.path }]"
           @click="handleMenuItemClick(bottomMenuItem.path, $event)"
         >
@@ -82,7 +82,7 @@ const handleMenuItemClick = (path, event) => {
             class="menu-item-icon"
           />
           <p>{{ bottomMenuItem.label }}</p>
-        </a>
+        </NuxtLink>
       </div>
     </div>
   </div>

dist/runtime/components/layouts/DashboardContainer.vue

@@ -11,15 +11,15 @@ const handleMenuItemClick = (path) => {
 
 <template>
   <div id="default-layout">
-    <SideHeader
+    <KSSideHeader
       :logo-text="sideHeaderProps.logoText"
       :menu-items="sideHeaderProps.menuItems"
       :current-path="sideHeaderProps.currentPath"
       :bottom-menu-item="sideHeaderProps.bottomMenuItem"
       @menu-item-click="handleMenuItemClick"
     />
     <div class="main-content">
-      <TopHeader :title="topHeaderProps.title" />
+      <KSTopHeader :title="topHeaderProps.title" />
       <slot />
     </div>
   </div>

playground/app.vue

@@ -20,20 +20,20 @@ const _sideMenuItems = [
       <section>
         <h2>Buttons</h2>
         <div style="display: flex; gap: 10px; margin-bottom: 20px;">
-          <MainButton
+          <KSMainButton
             type="submit"
             text="送信ボタン"
           />
-          <MainButton
+          <KSMainButton
             type="cancel"
             text="キャンセルボタン"
           />
-          <MainButton
+          <KSMainButton
             type="submit"
             text="ローディング"
             :loading="true"
           />
-          <MainButton
+          <KSMainButton
             type="submit"
             text="無効化"
             :disabled="true"
@@ -45,13 +45,13 @@ const _sideMenuItems = [
       <section>
         <h2>Forms</h2>
         <div style="max-width: 400px;">
-          <InputField
+          <KSInputField
             v-model="formData.name"
             label="名前"
             placeholder="名前を入力してください"
             :required="true"
           />
-          <TextareaField
+          <KSTextareaField
             v-model="formData.description"
             label="説明"
             placeholder="説明を入力してください"
@@ -63,18 +63,18 @@ const _sideMenuItems = [
       <!-- Panels テスト -->
       <section>
         <h2>Panels</h2>
-        <TextItem
+        <KSTextItem
           :text="`ユーザー名: ${formData.name || '未入力'}`"
         />
-        <TextItem
+        <KSTextItem
           :text="`説明: ${formData.description || '未入力'}`"
         />
       </section>
 
       <!-- Sections テスト -->
       <section>
         <h2>Sections</h2>
-        <SectionTextWithLine text="セクション見出し" />
+        <KSSectionTextWithLine text="セクション見出し" />
       </section>
     </div>
   </NuxtLayout>

playground/layouts/default.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { KSDashboardContainer } from '../../dist/runtime'
+
 const sideMenuItems = [
   { path: '/dashboard', label: 'ダッシュボード', icon: 'mdi:view-dashboard' },
   { path: '/users', label: 'ユーザー管理', icon: 'mdi:account-group' },
@@ -8,7 +10,7 @@ const sideMenuItems = [
 
 <template>
   <div>
-    <DashboardContainer
+    <KSDashboardContainer
       :side-header-props="{
         logoText: '管理画面',
         menuItems: sideMenuItems,
@@ -17,6 +19,6 @@ const sideMenuItems = [
       :top-header-props="{ title: '管理画面' }"
     >
       <slot />
-    </DashboardContainer>
+    </KSDashboardContainer>
   </div>
 </template>

src/runtime/components/headers/SideHeader.vue

@@ -77,7 +77,7 @@ const handleMenuItemClick = (path: string, event?: Event): void => {
             v-for="item in menuItems"
             :key="item.path"
           >
-            <a
+            <NuxtLink
               :href="item.path"
               :class="['menu-item', { active: props.currentPath === item.path }]"
               @click="handleMenuItemClick(item.path, $event)"
@@ -87,16 +87,16 @@ const handleMenuItemClick = (path: string, event?: Event): void => {
                 class="menu-item-icon"
               />
               <p>{{ item.label }}</p>
-            </a>
+            </NuxtLink>
           </li>
         </ul>
       </div>
       <div
         v-if="bottomMenuItem"
         class="bottom-wrapper"
       >
-        <a
-          :href="bottomMenuItem.path"
+        <NuxtLink
+          :to="bottomMenuItem.path"
           :class="['menu-item', { active: props.currentPath === bottomMenuItem.path }]"
           @click="handleMenuItemClick(bottomMenuItem.path, $event)"
         >
@@ -105,7 +105,7 @@ const handleMenuItemClick = (path: string, event?: Event): void => {
             class="menu-item-icon"
           />
           <p>{{ bottomMenuItem.label }}</p>
-        </a>
+        </NuxtLink>
       </div>
     </div>
   </div>