nuxt理解 - novel-suzukikeisuke/study GitHub Wiki

layouts

  • どのページにも適用される外観を構成するパーツ(header, footer, sidebarなど)、を配置することでpagesに反映することができる
  • 設定無しで自動的に読み込ませるためにはlayouts/default.vueとする
  • 読み込ませたくない場合はdefinePageMeta({ layout: false })とする

レイアウトファイルでページファイルを読み込む方法

<template>
  <div>
    <slot /> // pages配下のファイルを表示する
  </div>
</template>

ページファイルから指定する方法

<script setup>
definePageMeta({ layout: 'foo' })
</script>

app.vue がある場合は NuxtLayout を追加

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

middleware

  • サーバーで1回、クライアントではページ遷移のたびに読み込まれる(認証やページ制御に用いられる)
  • middleware/auth.global.tsのように.globalの接尾辞を付けておくと、ルートの変更時に自動的に実行される
  • リダイレクトする場合やパスを指定する場合 : navigateTo() を使用
  • 遷移しない場合 : abortNavigation()を使用 ###　defineNuxtRouteMiddleware()
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('middleware')
})

名前付きルートミドルウェアをページファイルで読み込む方法

<script setup>
  definePageMeta({
    middleware: ["auth"]
    // または middleware: 'auth'
  })
</script>

全てのページにmiddlewareを設置するとき

nuxt.comfig.js
export default {
  router: {
    middleware: 'routerOption'
  },
}

plugins

  • ライブラリやパッケージの利用に使用する
  • ファイルを自動的に読み込み、Vueアプリケーションの作成時にロードする
  • サーバーサイドでのみロードとする場合はファイル名に .serverを追加
  • クライアントサイドのみロードとする場合はファイル名に .clientを追加

引数はnuxtAppのみ指定できる

export default defineNuxtPlugin(nuxtApp => {
  // nuxtApp で何かする
})

NuxtApp インスタンスにヘルパーを提供したい場合 : プラグインからヘルパーをprovideキーで返す

plugins/
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})
他のファイルから呼び出す場合
<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>
<script setup lang="ts">
// または、こちらを使用
const { $hello } = useNuxtApp()
</script>

services

  • APIリクエストやバックエンドとの通信を管理するために使用する
  • 例 : apiService.ts, apiServiceResponse.ts

types

  • 型定義をまとめて管理するために使用される

interface : オブジェクトの型（構造）を定義できる

  • オブジェクトとクラスの型だけ定義
Userという名前で型注釈ができる
interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'Alice',
  email: '[email protected]',
};

type : オブジェクトとクラスの型以外も定義できる

type Color = "白" | "黒" | "赤" | "緑";

let color: Color = "白";
color = "青"; //Type '"青"' is not assignable to type 'Color'.

utils

  • 汎用的なヘルパー関数や便利なユーティリティ関数を配置するための場所
  • 自動的にインポートされる 例 : 時間定義、ステータスコード定義、
⚠️ **GitHub.com Fallback** ⚠️