🗂️

Nuxt3でlayoutsを使う

に公開

./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