Nuxt3でレイアウトファイルを使用するには<NuxtLayout>を使う
  • 2022.03.09に公開
  • Nuxt3
  • 0. Nuxt3
  • No.3 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

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

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。