How do you change layouts in nuxt3 inside a setup? - nuxt3

Question

I need to have a custom layout or remove default layout for my signIn page. Based on Nuxt3 docs you can set layout with definePageMeta({layout: "custom"}) or remove definePageMeta({layout: false}) however when I set it to false or "custom" I get a TypeError.
The definePageMeta does change the layout. However, there are instances where when you first load the signIn page it doesn't show anything and shows the TypeError above. Any advice on how to solve this issue is greatly appreciated!
Btw, I just recently started using nuxt3, never had this issue in nuxt2.
// sign in page
<template>
<div>
<NuxtLayout name="custom">
<v-row>Sign In Page</v-row>
</NuxtLayout>
</div>
</template>
<script lang="ts" setup>
definePageMeta({
layout: 'custom',
})
</script>
// layout custom.vue
<template>
<v-app>
<v-main>
<v-container fluid>
<slot />
</v-container>
</v-main>
</v-app>
</template>

Answer 1

To create layout in nuxt 3 you must add slot.
// custom layout
<template>
<div class="custom-layout">
<slot/>
</div>
</template>
and then in your page component add layout: 'custom' in definePageMeta in setup script.
<template>
// YOUR PAGE
</template>
<script setup lang="ts">
definePageMeta({
layout: "custom",
});
</script>
if you need app.vue you must add NuxtLayout to it
// app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>