Nuxt•14mo ago•

4 replies

Nuxt 3 Layout

In Nuxt 3, I have the following structure in my

app.vue

app.vue

<template>
  <nuxt-route-announcer />

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

<template>
  <nuxt-route-announcer />

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

For one of my pages, I set the layout to

false

false

inside the

definePageMeta

definePageMeta

and used the following structure:

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

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

<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

history-details

layout. However, if I set

layout: "history-details"

layout: "history-details"

definePageMeta

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.

Nuxt•14mo ago•

4 replies

Ashi Ashi~

Nuxt 3 Layout

In Nuxt 3, I have the following structure in my

app.vue

app.vue

<template>
  <nuxt-route-announcer />

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

<template>
  <nuxt-route-announcer />

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

For one of my pages, I set the layout to

false

false

inside the

definePageMeta

definePageMeta

and used the following structure:

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

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

<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

history-details

layout. However, if I set

layout: "history-details"

layout: "history-details"

definePageMeta

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.

Nuxt 3 Layout

Similar Threads

Nuxt 3 Layout

Similar Threads

Similar Threads

Similar Threads