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

appReady

is simply a ref that gets set to

true

true

in my

onMounted

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"

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?

Nuxt•2y ago•

1 reply

erztemplerobba

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

appReady

is simply a ref that gets set to

true

true

in my

onMounted

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"

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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads