Nuxt/Vue: How to position custom loading component

Question

I use nuxt and I followed this guide to make custom loading component: https://nuxtjs.org/api/configuration-loading/#use-a-custom-loading-component

This does work, but the loader is in the same position as the original nuxt loader bar:

You can see, I really added a very big and very simple loader with a red div.

At the bottom you can see my headebar (black bar with letter «s») so everything is moved downwards.

What I would like to achieve is that the loader takes the position of the page content instead to keep the header and the footer in place. Right now, it all shifts down to make space for the custom loader on top.

Is there a solution for that? Thanks in advance

Cheers

J

Merc · Accepted Answer · 2018-07-11 13:52:17Z

2

Well I built a big workaround:

I set a loading component in my nuxt.config:

loading: '~/components/Loading/Loading.vue',

This component should never display anything, but has these two methods:

methods: {
  start () {
    this.$store.commit('ui/SHOW_LOADER')
  },
  finish () {
    this.$store.commit('ui/HIDE_LOADER')
  }
}

With those I mutate the vuex ui store.

export const mutations = {
  SHOW_LOADER (state) {
    state.nuxtLoader = true
  },
  HIDE_LOADER (state) {
    state.nuxtLoader = false
  }
}

nuxtLoader: false, <=> nuxtLoader: true,

Within this store I set a getter:

export const getters = {
  nuxtLoader: state => state.nuxtLoader
}

And on my layouts I display <nuxt /> or the CustomLoader component (which holds an animated SVG) depending on the ui store nuxtLoader property.

<template>
    <div>
      <HeaderBar />
      <main id="main" class="Layout__content">
        <CustomLoader v-if="nuxtLoader" />
        <nuxt v-else />
      </main>
      <Footer />
    </div>
</template>

Now I give the user a feedback with a custom loader placed between headerbar and footer. 💪

I am still open for less work-aroundy and slicker solutions.

Cheers

J

answered Jul 11, 2018 at 13:52

Merc

4,6529 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Theo.T Over a year ago

Yet the most flexible solution I've run across, but since the answer is about a year old I'm curious if you've found something less "hacky" in the meantime ?

Merc Over a year ago

I have not cared for custom loaders anymore :) So no, unfortunately no. But I realized that there were some changes made to nuxt. Mostly we load practically all pages into the state of the app. Whenever we have a page transition, the loader is not shown anyway (at least a few months ago). This would only be shown when fetching posts/pages ... just data, asynchronously with asyncData. So the need for a custom loader was also reduced...

Collectives™ on Stack Overflow

Nuxt/Vue: How to position custom loading component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related