[Vuejs]-How to add loader in vue js

by

0👍

add this line of code in your app.js file

router.beforeEach((to, from, next) => {
   // add loader
   next()
})
router.afterEach(() => {
  // terminate you loader
})

so Full file is

window.Vue = require('vue');
import VueRouter from 'vue-router';
import VueProgressBar from 'vue-progressbar'

window.Fire =  new Vue();

Vue.use(VueProgressBar, {
    color: 'rgb(143, 255, 199)', //normal color for progress bar
    failedColor: 'red', //color for failed progress bar
    height: '2px'//height of progress bar can be changed here
})


Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.use(VueRouter);

window.Fire =  new Vue();


let routes = [

    {
        path: '/',
        name: 'posts',
        component: post,
    },
    {
        path: '/general',
        name: 'dashboard',
        component: Dashboard,
    },
   

];

let router = new VueRouter({

    routes // short for `routes: routes`
});


router.beforeEach((to, from, next) => {
  // add loader
 VueProgressBar .start();
 next()
})
router.afterEach(() => {
 // terminate you loader
  VueProgressBar.finish();
})

const app = new Vue({

    el: '#app',
    router,
    data: {},
    methods: {}
});

window.Fire = new Vue();

-1👍

If you are requesting while browsing through the pages, the loader can work accordingly.

<script>
export default {
    data: () => ({
        loaderIsActive: false,
        items: null,
    }),

    mounted() {
        this.fetch();
    },

    methods: {
        async fetch() {
            this.loaderIsActive = true;
            this.items = await axios.post('YOUR API');
            this.loaderIsActive = false;
        }
    }
}

In this way you can use it.

Leave a comment