"NuxtPage / NuxtLayout component has not been used" warn when NuxtLayout async show up

[serkodev]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.10.2
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-2vasos?file=app.vue

Describe the bug

I used <NuxtPage /> and <NuxtLayout /> components in the below way:

    <div v-if="loading">loading...</div>
    <NuxtLayout v-else>
      <NuxtPage />
    </NuxtLayout>

But it shows up the below warning in console log.

[nuxt] Your project has pages but the `<NuxtPage />` component has not been used. You might be using the `<RouterView />` component instead, which will not work correctly in Nuxt. You can set `pages: false` in `nuxt.config` if you do not wish to use the Nuxt `vue-router` integration.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

Additional context

My purpose is fetching some environment data from server before NuxtLayout and NuxtPage rendered and shows a loading layout. In addition, I will use it with SSR off.

Logs

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-2vasos (Open reproduction)

[TheAlexLichter]

Yup, that's not detected by the current warning process. You can ignore that one for now 😋

[abarke]

I'm also getting this error in a Nuxt Ionic App. In this case I am not using NuxtPage, because I'm using ion-router which I assume uses NuxtPage. Any way to disable this false positive warning?

[rodrigogs]

I have this same warning when using Amplify Authenticator:

    <NuxtLayout>
      <Authenticator>
        <NuxtPage />
      </Authenticator>
    </NuxtLayout>

[serkodev]

@manniL i was wondering if it is possible to add an option to ignore the warning message?

[amE80]

@serkodev By separating the files, I could remove the console warning and everything worked great (I had the same issue)

[Plinpod]

Same issue. Showing a loader than switching to <NuxtPage /> anyway to ignore this warning? Or is this considered bad practice?

[admg]

Same problem. I'm hiding NuxtPage component and showing login dialog, when user in not authenticated. Is there any other way to conditionally not render any nuxt page, without this warning?

EDIT. Workaround that works for me: <NuxtPage :name="isLoggedIn ? undefined : null" />

[steveulfelder]

The above didn't work for me. This does:

<template>
  <NuxtLayout v-if="loaded" :name="layout">
    <NuxtPage />
  </NuxtLayout>

  <!-- Dummy layout to prevent Nuxt warnings while loading -->
  <NuxtLayout v-else :name="false">
    <NuxtPage name="" />
  </NuxtLayout>
</template>

Do be aware that by waiting to render until your data fetching/client width calculation is complete, you lose one of the main benefits of SSR (fast first paints). May be worth considering an SPA instead of contorting Nuxt like this.

[serkodev]

@steveulfelder Thanks for sharing the solution and I totally agree your notice.

However, by using Nuxt's ssr: false option to develop an SPA, you can also enjoy Nuxt's excellent DX. The warning still appear when ssr: false is set.

[WojciechxFalkowski]

When it will be fixed? This issue is opened since February. I can see only 1 solution for that for now. I wrapper my slot with ClientOnly:

<ClientOnly>
 <slot v-if="showRestrictedContent"/>

 <LoadingIcon v-else/>
</ClientOnly>