応用 / Learch

Nuxt.js 3の応用

Nuxt.js 3の基本概念を理解した後、より高度な機能と最適化技術を学ぶことで、アプリケーションの開発をさらに前進させることができます。このセクションでは、コンポジションAPIの利用、ステート管理、ミドルウェアの利用について具体例を交えながら解説します。

コンポジションAPIの利用

Vue 3のコンポジションAPIは、再利用可能なロジックの構築と組織化を容易にします。Nuxt.js 3プロジェクトでのコンポジションAPIの活用例を見てみましょう。

具体例: カウンターコンポーネント

コンポジションAPIを使用して、状態とロジックをカプセル化したカウンターコンポーネントを作成します。

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

ステート管理

Nuxt.js 3では、Vue 3のコンポジションAPIと組み合わせてPiniaを使用することが推奨されています。Piniaは、Vueアプリケーションのためのステート管理ライブラリです。

具体例: Piniaを使用したステート管理

Piniaのセットアップ: Piniaをプロジェクトに追加します。
```
npm install pinia
```

ストアの作成: stores/counter.jsファイルを作成し、カウンターストアを定義します。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

ストアの使用: コンポーネントでストアを使用します。

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const count = computed(() => counter.count)
const increment = () => counter.increment()
</script>

ミドルウェア

ミドルウェアを使用すると、ページやグループのページに対して、ルーティングが行われる前に実行されるカスタム関数を設定できます。これは、認証チェックやアプリケーションの状態に基づいてリダイレクトする場合に便利です。

具体例: 認証ミドルウェア

middleware/auth.jsを作成し、ユーザーが認証されていない場合にログインページにリダイレクトするミドルウェアを定義します。

export default defineNuxtMiddleware((context) => {
  // 仮の認証チェック関数
  const isAuthenticated = false // 実際には認証状態をチェックするロジックに置き換える

  if (!isAuthenticated) {
    return navigateTo('/login')
  }
})

そして、このミドルウェアをpages/secure.vueページに適用します。

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

<template>
  <div>このページは認証されたユーザーのみがアクセスできます。</div>
</template>

Nuxt基本概念

NuxtAuto-Import機能