Zenn
🍣

【Nuxt3】Layoutを使ってページ共通レイアウトを作成

2023/04/06に公開
TypeScript
Vue 3
Nuxt 3
tech

はじめに

数ページで同じレイアウトを使う場合、各ページで同じコードを書くのがめんどくさかったので、何かいい方法がないか調べていたら、Nuxt3のLayoutという機能が使えそうだったので、試してみました。

Layoutの使い方

  1. Layouts/default.vueを作成
  2. app.vueに<NuxtLayout/>を追加

Layouts/default.vueを作成

default.vueは、アプリケーションのデフォルトレイアウトとなり、<slot />の中に各ページの DOM が挿入されます。

<template>
  <header>I'm genius!</header>
  <div>
    <slot />
  </div>
</template>

app.vueに<NuxtLayout/>を追加

<NuxtPage />にページの DOM が挿入されます。
それを<NuxtLayout />で囲うと、全ページでdefault.vueのレイアウトが反映されます。

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

ページによってレイアウトを変更させたい場合

ページによって以下のようにレイアウトを変更させたい場合、Nuxt ではそれぞれに合わせた機能があります。

Head Head
特定ページで別のレイアウトを使う definePageMeta の layout でレイアウトを指定
特定ページでレイアウトを無効にする definePageMeta の layout を false にする
動的にレイアウトを切り替える setPageLayout を使う

特定ページで別のレイアウトを使う

まず、切り替える用のレイアウト(layouts/custom.vue)を作成します。

<template>
  <header>Custom</header>
  <div>
    <slot />
  </div>
</template>

利用するページで、definePageMetaのlayoutを、layoutsディレクトリのファイル名に合わせると、
layouts/custom.vueのレイアウトが指定したページに反映されます。

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

特定ページでレイアウトを無効にする

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

動的にレイアウトを切り替える

動的にレイアウトを切り替える場合、
setPageLayoutの引数にlayoutsディレクトリのファイル名を指定することで実現できます。[1]

<script lang="ts" setup>
definePageMeta({
  layout: false,
});

const setLayout = () => {
  setPageLayout("custom");
};
</script>

<template>
  <div>
    <h1>test</h1>
    <button @click="setLayout">Enable layout</button>
  </div>
</template>

参考文献

Layoutを使ってページ間で共通のUIを利用する【Nuxt3】

公式ドキュメント - Layouts Directory

脚注

  1. 引用元 ↩︎

Discussion