Nuxt3 で Vuetify を使ってナビゲーションバーを実装する

概要

Nuxt3 で Vuetify を使ってナビゲーションバーを実装しました。

コード

コードは GitHub をご覧ください。

• https://github.com/johns-children/nuxt3-vuetify-navigation-example?tab=readme-ov-file

StackBritz でコードを見る・動かすこともできます。

• https://stackblitz.com/~/github.com/johns-children/nuxt3-vuetify-navigation-example

使用技術

• Nuxt3
• Vue3
• Vuetify

目的

ページトップにあるナビゲーションバー（ヘッダー、ナビゲーション）を実装することを目指しました。求める要件としては以下のようなものがありました。

• ナビゲーションの要素がリンクになっている。
• ナビゲーションは Nuxt の layouts を使う。リンクをクリックすると該当するリンクに対応した Nuxt の pages の画面遷移する。

ディレクトリ構造

Nuxt3 のシステムに従っています。https://nuxt.com/docs/guide/directory-structure/app

/pages

1. index.vue
   • Home ページです。ナビゲーションドロワーとコンテンツがある。
2. text.vue
   • 適当なテストページ。

/layouts

1. default.vue
   • ナビゲーションバーとコンテンツがある。

実装のポイント

v-tab は使わなかった

• ナビゲーションの実装は Vueitfy の v-tab を使いたい気持ちになりましたが、Nuxt の layouts と pages と組み合わせるとややこしいので使いませんでした。単純なリンクにしました。

ページ遷移の仕掛け

Nuxt 公式にも記述されていますが、layouts/default.vue にて NuxtLink でページ遷移が発生したら、<slot /> の部分に /pages の任意のページコンポーネントが埋め込まれます。

/layouts/default.vue

<template>
    <div>
        <v-layout>
            <v-app-bar class="px-3">
                <template v-slot:prepend>
                    <v-app-bar-title>Application</v-app-bar-title>
                    <div class="pl-10">
                        <NuxtLink
                            v-for="(item, i) in items"
                            :key="i"
                            :to="item.to"
                            class="mx-2 text-body-1 text-decoration-none"
                            :class="isActive(item) ? `text-blue` : `text-grey-darken-4`"
                        >
                            {{ item.text }}
                        </NuxtLink>
                    </div>
                </template>
            </v-app-bar>
            <v-main>
                <slot />
            </v-main>
        </v-layout>
    </div>
</template>