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 Merc · Accepted Answer · 2018-07-11T13:52:17

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

Nuxt/Vue: How to position custom loading component

1 Answers