nuxt项目中bulma-pageloader的正确实现方式

Question

所以这是我的代码：

<template>
    <div class="pageloader is-active">
      <span class="title">Pageloader</span>
    </div>
</template>

<script>
import 'bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.min.css';

export default{
    beforeMount: {

    },
    mounted: {

    }

}
</script>

我无法让 pageloader 出现。我错过了什么吗？

注意：所有依赖已经存在。

更新： 这是我基于estevanj解决方案实现扩展的方式。

pageloader.vue [组件]

    <template>
      <div class="pageloader" v-bind:class="{ 'is-active' : loading}">
        <span class="title">Pageloader</span>
      </div>
    </template>

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

main.sass [assets/css]

    @import '~bulma';
    @import '~bulma-extensions/bulma-pageloader/dist/css/bulma-pageloader.sass';

nuxt.config.js

  /*
  ** Customize the progress-bar color
  */
  loading:  '~/components/PageLoader.vue',

  /*
  ** Global CSS
  */
  css: [
    '~/assets/css/main.sass'
  ],

Answer 1

您必须像这样创建自定义加载： https://nuxtjs.org/examples/custom-loading/

您可以在自定义中使用 bulma one :)

nuxt项目中bulma-pageloader的正确实现方式

The correct way to implement bulma-pageloader in nuxt project

vue.js

bulma

nuxt.js