NuxtN
Nuxt•12mo ago
Ashi Ashi~

Nuxt 3 Layout

In Nuxt 3, I have the following structure in my 
app.vue
:

<template>
  <nuxt-route-announcer />

  <nuxt-layout>
    <nuxt-page />
  </nuxt-layout>
</template>


For one of my pages, I set the layout to false inside the definePageMeta and used the following structure:

<template>
  <nuxt-layout name="history-details">
    <template #side-content>
      side
    </template>

    <main>
      main
    </main>
  </nuxt-layout>
</template>


My main goal is to use a named slot within the history-details layout. However, if I set layout: "history-details" in definePageMeta, I cannot leverage the named slot. That’s why I am using this structure instead, based on the Nuxt documentation on overriding layouts.

Is this approach valid, or am I doing something wrong?
Nuxt
layouts/ · Nuxt Directory Structure
Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.
Was this page helpful?