How to prevent Nuxt 3 default layout from rendering?-CodePudding

Because the

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

CodePudding user response：

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>

CodePudding user response：

In docs is to written use <slot/> but in my case i've been using for <NuxtPage/>

i dunno is there any difference between them

Here is the example of empty layout from my project

layouts/empty.vue

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

and here example of real layout

layouts/landing.vue

<template>
  <div >
    <Header />
    <NuxtLoadingIndicator />

    <NuxtPage />

    <Footer />
  </div>
</template>

and you can selectively choose which one do you want to use in your pages/ components

as in the anwser above

pages/index.vue

<script setup>
definePageMeta({
  layout: "empty", // or landing as the name of vue files in layouts directory
});
</script>