How to prevent Nuxt 3 default layout from rendering?

How to prevent Nuxt 3 default layout from rendering?

Problem Description:

Because the nuxt 3 docs are a codesandbox and do not explain anything, according to nuxt 2 docs the default layout should be replaced by any layout that is specified inside the name property of <nuxt-layout> component but for me both layouts are rendered.

layouts/default.vue:

<template>
  <div>
    <p>default layout</p>
    <slot/>
  </div>
</template>

layouts/custom.vue:

<template>
  <div>
    <p>custom layout</p>
    <slot/>
  </div>
</template>

pages/index.vue:

<template>
  <nuxt-layout name="custom">
    <p>hello world</p>
  </nuxt-layout>
</template>

How do I only render the custom layout in index.vue?

Edit:

I understand that you can override the default layout by adding this to a component:

<script setup>
definePageMeta({
  layout: "custom"
})
</script>

but this method assigns only one layout. How can I use the html version -> <nuxt-layout name="custom"/> without rendering the default layout? This way it would be possible to have multiple layouts in one component. In the docs it shows that it should work, but for me it doesn’t

Solution – 1

In pages, add this to your script. For more information visit nuxt3-layouts.

~/pages/dashboard.vue

<script setup>
definePageMeta({
  layout: "dashboard",
});
</script>

~/pages/index.vue

<script setup>
definePageMeta({
  layout: "default",
});
</script>

Updated:

Disable the default layout from pages and instead use the built-in component NuxtLayout and add a name to it.
Also don’t forget to have an app.vue and NuxtPage. This will help in changing the layouts. Check this out.

~pages/dashboard.vue

<template>
  <div>
      <NuxtLayout name="dashboard">
          <p style="color: red">This is dashboard</p>
      </NuxtLayout>
  </div>
</template>

<script setup>
definePageMeta({
  layout: false,
});
</script>

app.vue

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