🗂️

Nuxt3でlayoutsを使う

2022/02/21に公開

./layoutsディレクトリにレイアウトファイルを作成

./layouts/sample.vue
<script lang="ts" setup>
</script>
<template>
    <slot></slot>
</template>
<style lang="scss">
</style>

./app.vueファイルに<NuxtLayout>を追加

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

使いたいページでdefinePageMetaを設定

./pages/index.vue
definePageMeta({
    layout: "authenticated",
});

参考

https://github.com/nuxt/framework/pull/3011

Discussion