Nuxt•9mo ago

Nuxt 3 Loading Component?

Hey guys, I've just noticed that Nuxt 3 doesn't have the same loading component as V2. Is there a way I can use my old loading component with Nuxt 3? What's the best workaround for this?

<template>
  <transition name="fade">
    <div v-if="loading" class="loading-page">
      <p id="loadingTitle">Loading...</p>
      <p class="number text-9xl font-righteous"></p>
    </div>
  </transition>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),

  beforeMount() {
    const numb = document.querySelector('.number')
    let counter = 0
    setInterval(() => {
      if (counter === 100) {
        clearInterval()
      } else {
        counter += 1
        numb.textContent = counter + '%'
      }
    }, 10)
  },

  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

<style scoped>
#loadingTitle {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

<template>
  <transition name="fade">
    <div v-if="loading" class="loading-page">
      <p id="loadingTitle">Loading...</p>
      <p class="number text-9xl font-righteous"></p>
    </div>
  </transition>
</template>

<script>
export default {
  data: () => ({
    loading: true,
  }),

  beforeMount() {
    const numb = document.querySelector('.number')
    let counter = 0
    setInterval(() => {
      if (counter === 100) {
        clearInterval()
      } else {
        counter += 1
        numb.textContent = counter + '%'
      }
    }, 10)
  },

  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

<style scoped>
#loadingTitle {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 0.25s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

22 Replies

Muhammad Mahmoud•9mo ago

NuxtLoadingIndicator is the equivalent for Nuxt 2 Loading component https://nuxt.com/docs/api/components/nuxt-loading-indicator

KMOP•9mo ago

That’s between page navigations, I want something for when the site initially loads.

Muhammad Mahmoud•9mo ago

You mean you have an spa with ssr: false?

KMOP•9mo ago

I don’t but is that something I would need to do to get this working? Can I not just use page:loading:start?

Muhammad Mahmoud•9mo ago

I'm asking because I'm not sure what's your use case If you're using SSR (the default), then the page gets rendered at the server and served directly to the browser. Hence you won't need that initial loader on first load Maybe something like this is what you need?

<script setup lang="ts">
const nuxtApp = useNuxtApp();

const loading = ref(false);
nuxtApp.hook("page:start", () => {
  loading.value = true;
});

nuxtApp.hook("page:finish", () => {
  loading.value = false;
});
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-50"
    >
      Loading...
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp();

const loading = ref(false);
nuxtApp.hook("page:start", () => {
  loading.value = true;
});

nuxtApp.hook("page:finish", () => {
  loading.value = false;
});
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-50"
    >
      Loading...
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

KMOP•9mo ago

Yeah i need to add one on the inital load. So i'm guessing if I do ssr: false and then just use spaLoadingTemplate:

Muhammad Mahmoud•9mo ago

Yeah Excactly

KMOP•9mo ago

Can I use a vue file with spaLoadingTemplate or does it have to be HTML? Also is it possible to actual customise the loading screen or is it just the spinner with spaLoadingTemplate?

Muhammad Mahmoud•9mo ago

IIRC it have to HTML. I think I don't understand correctly your second question. You can do whatever you like in spaLoadingTemplate.html and that will show up on the client while it loads your app

KMOP•9mo ago

Essentially I’m trying to work out how to do this in Nuxt 3: https://debbie.codes/blog/nuxt-loading/ Where I can have a loading screen as a model with a progress bar/animation

Debbie Codes

Customizing the Nuxt Loading Component

We can customize the Loading for our Client Side applications as well as the loading Progress bar for our server rendered applications and we can even customize this to create our own.

Muhammad Mahmoud•9mo ago

Did you try the code I posted above? I think that is what you're asking for

KMOP•8mo ago

This is pretty much what i'm after but the loading hook just didn't work at all This is what I ended up doing instead. I have no idea why the page:start hook just didn't work at all.

<script setup lang="ts">
const nuxtApp = useNuxtApp()

const loading = ref(false)
loading.value = true

nuxtApp.hook('page:finish', () => {
  loading.value = false
})
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-100 bg-black z-[999]"
    >
      Loading...
    </div>

    <div>
      <h1>
        {{ loading }}
      </h1>
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp()

const loading = ref(false)
loading.value = true

nuxtApp.hook('page:finish', () => {
  loading.value = false
})
</script>

<template>
  <div>
    <div
      v-if="loading"
      class="fixed h-screen w-screen opacity-100 bg-black z-[999]"
    >
      Loading...
    </div>

    <div>
      <h1>
        {{ loading }}
      </h1>
    </div>

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Muhammad Mahmoud•8mo ago

That's weird maybe we're misunderstanding something 🤔 Anyway good thing you got it to work

Gruce•8mo ago

I don't think you can hook page start inside the page

Muhammad Mahmoud•8mo ago

You can in composables so why not in pages?

Gruce•8mo ago

If page started then how can the page itself know it has been started?

Muhammad Mahmoud•8mo ago

That's seems right but composables can only called in and pages components which is used in pages then how it's working for composables and not in pages

Gruce•8mo ago

Logically it shouldn't in composables, can I see the code please?

Muhammad Mahmoud•8mo ago

https://nuxt.com/docs/guide/going-further/hooks#app-hooks-runtime

Nuxt

Lifecycle Hooks · Nuxt Advanced

Nuxt provides a powerful hooking system to expand almost every aspect using hooks.

Muhammad Mahmoud•8mo ago

The example has a plugins file but it says it cal also be used in composables. The example has page:start hook

Gruce•8mo ago

Sure you can use it in composables but not call page:start inside the page, but plugin instead.

Muhammad Mahmoud•8mo ago

I'm agreeing with you it makes sense but after I've saw the docs I thought that there's some compiler thing that makes it work

Gaming

Programming

Nuxt 3 Loading Component?