Nxut3でレイアウトファイルを使用するには

Nxut3でレイアウトファイルを使用するには、<NuxtLayout>コンポーネントを使用します。

pages/test.vue

<template>
  <NuxtLayout>
    test.vue
  </NuxtLayout>
</template>

レイアウトファイルは「layouts」ディレクトリのVueファイルを参照します。

Nxut3のアプリ立ち上げ時にはまだ作成されていないので、自分でディレクトリから作成する必要があります。

% mkdir layouts && touch $_/default.vue

レイアウトファイル => ページの呼び出し

レイアウトファイルからページを呼び出すには<slot />を使用します。

layouts/default.vueがデフォルトで呼ばれるレイアウトファイルとなります。

layouts/default.vue

<template>
  <div>
    <div>
      <NuxtLink
        to="/"
      >
        Home
      </NuxtLink>
    </div>

    <!-- pagesの呼び出し -->
    <slot />
  </div>
</template>

ページファイル => レイアウトの呼び出し

ページファイルからレイアウトを呼び出すには<NuxtLayout>コンポーネントを使用します。

この時使用されるレイアウトファイルはdefault.vueです。

pages/test.vue

<template>
  <NuxtLayout>
    test.vue
  </NuxtLayout>
</template>

nameプロパティにファイル名を指定することでカスタムレイアウトを使用できます。

pages/test.vue

<!-- layouts/app.vueが使用される -->
<NuxtLayout name="app">
  page content
</NuxtLayout>

setup内でdefinePageMetaを使用してカスタムレイアウトを指定することができます。

pages/test.vue

<!-- 下記は <NuxtLayout name="app"> と同じ -->
<template>
  <NuxtLayout>
    test.vue
  </NuxtLayout>
</template>

<script setup lang="ts">
  definePageMeta({
    layout: "app"
  })
</script>

参考: Nuxt 3 - Layouts directory