Nuxt•4mo ago

Nuxt warning when adding v-if="appReady" to app.vue

My nuxt app is heavily reliant on data that comes from my db and some external sources, so I want to add a spinner/progress component until the necessary data is fetched. Right, now, I'm using this:

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <div v-if="appReady">
      <NuxtPage />
    </div>
    <div v-else>
        <UProgress animation="carousel" color="primary" />
    </div>
  </NuxtLayout>
  <UNotifications />
  <UModals />
</template>

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <div v-if="appReady">
      <NuxtPage />
    </div>
    <div v-else>
        <UProgress animation="carousel" color="primary" />
    </div>
  </NuxtLayout>
  <UNotifications />
  <UModals />
</template>

appReady is simply a ref that gets set to true in my onMounted hook whenever the required data is present. I ran into the problem that nuxt always throws a <NuxtPage> or <NuxtLayout> warning depending on which element I add the v-if="appReady" check to:

check-if-page-unused.js?v=904b885f:11 [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.

check-if-page-unused.js?v=904b885f:11 [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.

I was wondering what is the "correct" way of doing that?

1 Reply

manniL•4mo ago

You can ignore that for now 🙂

Gaming

Programming

Nuxt warning when adding v-if="appReady" to app.vue