How to get the vue-progressbar to display?

How to get the vue-progressbar to display?

The vue-progressbar being used: https://github.com/hilongjw/vue-progressbar

The api-axios.js creates an instance of axios using the url it will retrieve from.

The data is being retrieved, but the progress bar does not appear. There are no errors in the browser console.

Any help would be greatly appreciated.

app.js:

require('./bootstrap');

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import PostComponent from './components/PostComponent'
import PortalComponent from './components/PortalComponent'

import App from './components/App'

const router = new VueRouter({
        base: '/',
        mode: 'history',
        history: true,

        routes: [
        {
            path: '/',
            name: 'home',
            component: PostComponent,
            meta: {
              progress: {
                func: [
                  {call: 'color', modifier: 'temp', argument: '#ffb000'},
                  {call: 'fail', modifier: 'temp', argument: '#6e0000'},
                  {call: 'location', modifier: 'temp', argument: 'top'},
                  {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
                ]
              }
            }
        },
        {   path: '/portal/:id', 
            component: PortalComponent 
        },
    ],
});

import VueProgressBar from 'vue-progressbar'

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

export default new Vue({
    el: '#app',
    components: { App },
    router,
    }).$mount('#app')

Vue component that uses the vue-progressbar:

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
             <!--   <div class="card-header">Jobs</div> -->

                <div class="card-body">
                  <div class="col" ref="posts-window">
                     <div v-for="post in posts" :key="post.id">

                        <p>{{ post.title }}</p>
                        <p>{{ post.description }}</p>
                        <p>{{ post.body }}</p>

                        <p> <button v-on:click="handleClick(post)">Links</button> </p>

                     </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

import instance from '../api-axios.js'

    export default {

        data () {
            return {
              posts: {},
            }   
        },


        watch: {
           messages() {
           this.scrollToBottom();
          }
      },

        methods: {

            methods: {

            getPosts(){

                //var url = "/postlist"
                // axios
                // .get(url)
                // .then(response => (this.posts = response.data.posts))

                instance
                .get()
                .then(response => (this.posts = response.data.posts))
                .then((response) => {
                      this.$Progress.finish()
                  }, (response) => {
                      this.$Progress.fail()
                  })

            },

            handleClick(post) {

                var url = "/portal/" + post.id

                this.$router.push(url)
            },

            scrollToBottom() {
        this.$nextTick(() => {
            this.$refs['posts-window'].scrollTop = this.$refs['posts-window'].scrollHeight;
        });
    }

        },
        created() {
            this.getPosts()
        }
    }
</script> 

<style scoped>
.col {
    overflow-y: auto;
    max-height: 188px;
    word-wrap: break-word;
}
</style>

Vue App.vue component that defines the vue-progressbar behavior:

<template>
    <div id="app">

        <router-view></router-view>

        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
export default {
  mounted () {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish()
  },
  created () {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start()
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        // parse meta tags
        this.$Progress.parseMeta(meta)
      }
      //  start the progress bar
      this.$Progress.start()
      //  continue to next page
      next()
    })
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish()
    })
  }
}
</script>

api-axios.js file that defines an axios instance:

import axios from 'axios';
import app from 'app'; // import the instance

const instance = axios.create({
    baseURL: '/postlist'
});

instance.interceptors.request.use(config => {
    app.$Progress.start(); // for every request start the progress
    return config;
});

instance.interceptors.response.use(response => {
    app.$Progress.finish(); // finish when a response is received
    return response;
});

export default instance; // export axios instace to be imported in your app

I used nprogress. It's a really simple progress bar.

import 'nprogress/nprogress.css' main.js
service.js(axios goes here)
import NProgress from 'nprogress' service.js

const apiClient = axios.create({
  baseURL: `http://localhost:3000`,
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  timeout: 15000
})
//start when you start done when you finish (i use interceptors)
 apiClient.interceptors.request.use(config => {
   NProgress.start()
   return config
 })

 apiClient.interceptors.response.use(response => {
   NProgress.done()
   return response
 })

Each time api call has been made it runs the progress bar and finish when the content has been loaded.