Buefy "loader" is not showing.

[robfordww]

Versions

Nuxt.js @ v2.14.5 Node: v12.18.4

Reproduction

Buefy "loader" is not showing.

When I create a brand new project like this: yarn create nuxt-app testapp I choose "Buefy", "Typescript", "Static site"

Then I try to use the Buefy example code for "loader": https://buefy.org/documentation/loading

<template>
  <section>
    <b-field>
      <button class="button is-primary is-medium" @click="openLoading">
        Launch loading
      </button>
    </b-field>
    <b-field>
      <b-switch v-model="isFullPage">
        Display loader over full page
      </b-switch>
    </b-field>
    <b-notification :closable="false">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
      <b-loading v-model="isLoading" :is-full-page="isFullPage" :can-cancel="true" />
    </b-notification>
  </section>
</template>

<script>
export default {
  name: 'Loader',
  components: {
  //  Loading
  },
  data () {
    return {
      isLoading: false,
      isFullPage: true
    }
  },
  methods: {
    openLoading () {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 10 * 1000)
    }
  }
}
</script>

... and it does not work. No error messages or warnings. The "loader" animation is just not showing when I click the button. I have tried a lot of fiddling with the parameters, yet I cant get the loader-animation to show. Otherwise, Buefy seems to be working. So what is happening here? Is there some NuxtJS override that conflicts with this loader in some sense?

[fabiofdsantos]

Are you still having the issue? Here's my setup...

nuxt.config.ts

loading: '@/components/Loading.vue'

Loading.vue

<template>
  <b-loading is-full-page :active="isLoading" />
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'

export default Vue.extend({
  computed: {
    ...mapGetters({
      isLoading: 'loadingStatus',
    }),
  },
})
</script>