Run the following command:
npm install vue-progressbar
Add Following code in the location:\resources\js\app.js
import VueProgressBar from "vue-progressbar" const options = { color: '#0000CD', failedColor: '#874b4b', thickness: '5px', transition: { speed: '0.2s', opacity: '0.6s', termination: 300 }, autoRevert: true, location: 'top', inverse: false } Vue.use(VueProgressBar, options)
Create a page ProgressBarBlock.vue in the location:\resources\js\components\block and to Inventory Layout(follow layout tutorial)
<template> <vue-progress-bar> </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>
Total : 18980
Today :9
Today Visit Country :