The correct way to implement bulma-pageloader in nuxt project

Question

So this is my code:

<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>

I couldn't get the pageloader to show up. Did i miss something?

Note: All dependency is already there.

Update: This is how I implement the extension based on estevanj solution.

pageloader.vue [components]

    <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

You'll have to create a custom loading like this one: https://nuxtjs.org/examples/custom-loading/

You can use the bulma one inside the custom :)