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 : 35219
Today :12
Today Visit Country :