レイアウト

Nuxt は UI パターンを再利用可能にするための機能を提供しています。
layout は ~/layouts デイレクトリに実装され、app.vue で NuxtLayout を使用することで適応されます。
layout は各ページごとに definePageMeta を通して選択することができます。

-| layouts/
  ---| default.vue
  ---| custom.vue

<!-- layouts/custom.vue -->
<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<!-- pages/about.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

ミドルウェア

Nuxt では、特定のルートにナビゲートする前にコードを実行する為のミドルウェアを提供しています。この機能は例えば、認証状態によってページへのアクセスを制限する場合などに便利です。

レンダリングモード

Nuxt は様々なレンダリングモードをサポートしています。具体的には、ユニバーサルレンダリング、クライアントサイドレンダリング、ハイブリッドレンダリングがあります。

Edit this page