Nuxt

パスに基づくルーティング

通常の Vue.js アプリケーションでは、すべてのルートを手動で登録する必要がある。Nuxt は、パスに基づくルーティングを使用して、アプリケーション内のすべてのルートを自動的に登録する。

ページは app/pages/ フォルダーで宣言され、ページ ファイルの名前がルートの名前になる。ダイナミック ルートは角括弧 [] を使用して追加でき、キャッチオール ルートは JavaScript の配列スプレッド構文のように 3 つのドットと角括弧 [...] を使用して追加できる。

• ~/pages/about.vue - /about に一致する
• ~/pages/user/[id].vue - /user 直下のすべてのルートに一致する
• ~/pages/posts/[...slug].vue - /posts 直下のすべてのルートに一致する
• ~/pages/admin/[[page]].vue - /admin およびその直下のすべてのルートに一致する

自動インポート

Nuxt は、Vue.js の API と、app/components/、app/composables/、app/utils/ フォルダーに作成されたファイルを自動的にインポートする。

<script setup lang="ts">
const count = ref(1) // `ref` が自動的にインポートされる
</script>

レイアウト

Nuxt はサーバーサイド レンダリングに適応したレイアウトを標準でサポートしており、ヘッダーやフッターなどの基本的なテンプレートを複数のページで使用できる。レイアウトは app/layouts/ フォルダーで宣言され、Vue.js のスロットを使用して動作する。

レイアウトを使用するには、エントリ ポイントの app.vue にページのレイアウトを切り替える <NuxtLayout> コンポーネントを追加する必要がある。

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

デフォルトのレイアウトは ~/layouts/default.vue であり、ページ コンテンツ用の <slot> を追加する必要がある。

<!-- app/layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

ページでは、セットアップ関数またはブロックで definePageMeta ヘルパーを使用することで、カスタム レイアウトを使用できる。

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

出典