Nuxt•9mo ago

[RESOLVED] I need await on start up of app.vue

I would like to wait until it has finished loading all the essential data to be able to proceed with using the application, what is the best practice? I'm currently using a plugin and until it enters onMounted the layout and page aren't shown.

<template>
    <NuxtLayout v-if="finish">
      <NuxtPage />
    </NuxtLayout>
</template>

<script setup lang="ts">
const finish = ref(false);
onMounted(() => finish.value = true)
</script>

<template>
    <NuxtLayout v-if="finish">
      <NuxtPage />
    </NuxtLayout>
</template>

<script setup lang="ts">
const finish = ref(false);
onMounted(() => finish.value = true)
</script>

42 Replies

Luckystriike•9mo ago

Would do it the same way but with a loading indicator/page. But there has to be a nicer way. Curious how other people would do it.

CesxhinOP•9mo ago

Can hooks events be stopped? with async/await

pyplacca•9mo ago

I usually opt for an asynchronous middleware. This blocks the app from loading until the promise has been resolved

CesxhinOP•9mo ago

uhm okay, but how do you understand that it only needs to charge once? Middleware are the routes and they are triggered every time the page is changed.

pyplacca•9mo ago

Yon can combine that with a cookie or a global state. So you only call/await the async function when the state holds a certain value (you decide what the value is)

Luckystriike•9mo ago

But you will get a blank page till everything is loaded right?

pyplacca•9mo ago

Yes That’s what happens on initial page load. Subsequent page navigations using the same middleware - if the await call is not skipped - will just block the navigation until the middleware has finished running

CesxhinOP•9mo ago

I honestly don't like this solution, it seems like the connection is slow or network problems

pyplacca•9mo ago

that's fine. it was only a suggestion PS: if you're fetching the data from an external API, you can only but wait. Add a loading screen for wait time would improve the UX nonetheless

CesxhinOP•9mo ago

I appreciate your suggestion thanks. I also did this in app.vue but I got the warning saying that I have some pages and I don't have the <NuxtPage> tag just because it was hidden at a certain time.

pyplacca•9mo ago

are you rendering the NuxtPage conditionally?

CesxhinOP•9mo ago

yah, look at the first comment I made

pyplacca•9mo ago

the condition there is on the layout

CesxhinOP•9mo ago

yes, because I don't want to see the layout too

pyplacca•9mo ago

try this. should help clear the error

<template>
  <div v-if="finish">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div v-if="finish">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

CesxhinOP•9mo ago

not work.

[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 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.

my code now is:

    <template v-if="finish">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </template>
    <template v-else>
      loading
    </template>

    <template v-if="finish">
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </template>
    <template v-else>
      loading
    </template>

pyplacca•9mo ago

no, not on the template the layout is wrapped in a div that's has the condition

CesxhinOP•9mo ago

same error also with div

pyplacca•9mo ago

strange

CesxhinOP•9mo ago

there is also this warn:

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used. 
    at process.processTicksAndRejections (node)

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used. 
    at process.processTicksAndRejections (node)

pyplacca•9mo ago

i just tested with this and it worked fine

CesxhinOP•9mo ago

how you defined pages and layouts?

pyplacca•9mo ago

I don't follow can u rephrase?

CesxhinOP•9mo ago

try create one page and one layout

pyplacca•9mo ago

I have 2 layouts and several pages i'm on nuxt v3.11.1

CesxhinOP•9mo ago

uhm, very strange.... I used <slot> on layout, it's correct ? me too

pyplacca•9mo ago

yeah. same wait, is that the only child inside the layout?

CesxhinOP•9mo ago

what mean?

pyplacca•9mo ago

what does your layout look like. then content of layout's template nevermind. doesn't really matter

CesxhinOP•9mo ago

<template>
  <bar />
  <div id="content">
    <slot></slot>
  </div>
  <otherComponents />
</template>

<template>
  <bar />
  <div id="content">
    <slot></slot>
  </div>
  <otherComponents />
</template>

This is my layout for default and login (without component bar). I have two layouts

pyplacca•9mo ago

one moment hmm. looks fine. not sure why you're getting that error

pyplacca•9mo ago

hope this helps https://github.com/nuxt/nuxt/issues/24912#issuecomment-1880021026

GitHub

Warning from NuxtLayout: Your project has layouts but the `` compon...

Environment package.json { "nuxt": "^3.9.0", "typescript": "^5.2.2", "vue": "3.4.0-rc.3", "vue-router": "latest" } Re...

CesxhinOP•9mo ago

in my opinion it would have been very useful to somehow stop the client process in the hook for a moment I read thanks in the documentation there is this:

  // or only skip middleware on initial client load
  const nuxtApp = useNuxtApp()
  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return

  // or only skip middleware on initial client load
  const nuxtApp = useNuxtApp()
  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return

But let's return to the same problem which must be put in middleware and seems to be the effect of the internet slowdown

pyplacca•9mo ago

yeah. that helps greatly when you're using a middleware

Luckystriike•9mo ago

Something like this doesn’t work?

CesxhinOP•9mo ago

I think that this is correct but the problem is display on console one warning of NuxtPage

Luckystriike•9mo ago

Mhh

Luckystriike•9mo ago

https://nuxt.com/docs/api/components/nuxt-loading-indicator

Nuxt

· Nuxt Components

Display a progress bar between page navigations.

Luckystriike•9mo ago

Not sure if you can hide the nuxtpage at first

Luckystriike•9mo ago

https://stackoverflow.com/a/76937981

Stack Overflow

How to add a page loader in Nuxt 3 application

I’m building an application using Nuxt 3, I want to add a page loader until the website loads.

CesxhinOP•8mo ago

It's okay to remove the loading animation but that's not what I need. Apparently only what I did works, that is, creating an asynchronous plugin and as long as app.vue enters onMounted it means that it has loaded all the plugins. Currently the most effective solution without having warnings for NuxtPage is to set the #__nuxt style as display: none; and when onMounted of app.vue enters I set #__nuxt as display: block; Thanks guys so much for helping me.

pyplacca•8mo ago

ahh the simplicity 👌

Gaming

Programming

[RESOLVED] I need await on start up of app.vue