After reviewing the Nuxt 3 documentation and finding it lacking in explanation, I turned to the Nuxt 2 docs. According to them, the default layout should be replaced by a specific layout specified within the name property of the <nuxt-layout> component. However, I encountered an issue where both layouts were being rendered simultaneously.
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>
https://i.sstatic.net/tbbsp.png
How can I ensure that only the custom layout is rendered in index.vue?
Edit:
I have discovered that overriding the default layout can be achieved by adding this to a component:
<script setup>
definePageMeta({
layout: "custom"
})
</script>
However, this method allows for only one assigned layout. Is there a way to utilize the HTML version ->
<nuxt-layout name="custom"/>