Nuxt.js layout: false displays an empty page

I have a Nuxt site that has pages and layouts enabled. I have one layout called default.vue that contains:

    <div id="app">
        <AppSidebar />
        <main class="main-content">
            <NuxtPage />
        </main>
    </div>

I am using NuxtAuth for authentication. I would ideally like the authentication page to not contain a sidebar which results in this definePageMeta():

definePageMeta({
        layout: false,
        auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/' },
})

When I set layout: to false, instead of becoming fullscreen and using the page as its own page, it instead displays pure black.

Screenshot of black webpage

I think that's because you used layout: false.

Nuxt removes all layout structure and as a result, it'll cause black screen.

I suggest you to create a simple layout. (for example, layouts/auth.vue)

<template>
  <div class="auth-layout">
    <slot />
  </div>
</template>

and in your auth page,

definePageMeta({
  layout: 'auth',
  auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/' },
})

I'm sure that this'll give you clean, sidebar-free page without breaking rendering.

If this works well, don't forget to accept my answer.

Hope your success.