【Vue×Vuetify×Vue-Router】ナビゲーションバーを作ってみる

今回は、VueとVuetifyとVue-Routerを使ってナビゲーションバーを作成してみます。
Vuetify + TypeScript でヘッダーを作るなら、「再利用できるコンポーネントとして切り出す」のが基本です。

完成イメージ

ディレクトリ

└── frontend/
    └── src/
        ├── components/
        │   └── HeaderBar.vue
        ├── router/
        │   └── index.ts
        ├── views/
        │   ├── HomeView.vue
        │   ├── ProductsView.vue
        │   ├── CartView.vue
        │   ├── AboutView.vue
        │   ├── LoginView.vue
        │   └── RegisterView.vue
        ├── App.vue
        ├── main.ts
        └── package.json

事前準備：Vue-Routerをインストール

Vue-Routerをインストールします。

1.ヘッダーコンポーネントを作成

まずはヘッダー用コンポーネントを作成します。

src/
├── components/
│   └── HeaderBar.vue   ← 👈これを新規作成
├── App.vue

Vuetify のv-app-barを使うと簡単にヘッダーが作れます。

HeaderBar.vue

<template>
    <v-app-bar>
        <!-- 左端 -->
        <v-toolbar-title>EC Store</v-toolbar-title>
        <v-spaver />
        <!-- 右端メニュー -->
        <v-btn text to="/">Home</v-btn>
        <v-btn text to="/products">Products</v-btn>
        <v-btn text to="/cart">Cart</v-btn>
        <v-btn text to="/about">About</v-btn>
        <v-btn text to="/login">Login</v-btn>
        <v-btn text to="/register">Register</v-btn>
    </v-app-bar>
</template>

<script setup lang="ts">
</script>

<style>
</style>

2.App.vue に組み込む

ヘッダーは「全ページ共通」なのでApp.vueに入れます。

App.vue

<template>
  <v-app>
    <HeaderBar />
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import HeaderBar from './components/HeaderBar.vue'
</script>

3.router の設定

ボタンのto="/xxx"を使うなら、ルーターが必要です。

src/router/index.ts

index.ts

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {path:'/',component:()=>import('@/views/HomeView.vue')},
    { path: '/products', component: () => import('@/views/ProductsView.vue') },
    { path: '/cart', component: () => import('@/views/CartView.vue') },
    { path: '/about', component: () => import('@/views/AboutView.vue') },
    { path: '/login', component: () => import('@/views/LoginView.vue') },
    { path: '/register', component: () => import('@/views/RegisterView.vue') },
]

export default createRouter({
    history: createWebHistory(),
    routes,
})

4.views（画面）を作成

src/views/
├── HomeView.vue
├── ProductsView.vue
├── CartView.vue
├── AboutView.vue
├── LoginView.vue
├── RegisterView.vue

ファイルの中身は、いったん最低限の者だけを置いておきます。

HomeView.vue

<template>
  <div>Home</div>
</template>

ProductsView.vue

<template>
  <div>Products</div>
</template>

CartView.vue

<template>
  <div>Cart</div>
</template>

AboutView.vue

<template>
  <div>About</div>
</template>

LoginView.vue

<template>
  <div>Login</div>
</template>

RegisterView.vue

<template>
  <div>Register</div>
</template>

5.router をmain.tsに登録

routerをmain.tsに登録しましょう。

main.ts

// Vuetifyのデフォルトのスタイリングが適用
import 'vuetify/styles'

// VuetifyのcreateVuetify関数をインポート
import { createVuetify } from 'vuetify'

// Vuetifyのコンポーネントが使用できる
import * as components from 'vuetify/components'

// Vuetifyのディレクティブが使用できる
import * as directives from 'vuetify/directives'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // ルーティング機能を追加

// インポートしたコンポーネントとディレクティブを設定としてVueインスタンスを生成
const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(router).use(vuetify).mount('#app'); // ルーティング機能を追加

サイト

npm audit への立ち向かい方

【個人開発】Vue.jsを触ってみる -フォルダ構成-