Table of Contents

Installation

npm install @jambonn/vue-next-progressbar

yarn add @jambonn/vue-next-progressbar

Usage

Global

import{createApp}from'vue';import{createRouter,createWebHistory}from'vue-router';importVueNextProgressbarfrom'@jambonn/vue-next-progressbar';importAppfrom'./App.vue';constapp=createApp(App);app.use(createRouter({history:createWebHistory(),routes:[],}));app.use(VueNextProgressbar,{router:true});app.mount('#app');

Use in component

<template>  <buttontype="button"@click="progressBar.start()">Shows the progress bar</button>  <buttontype="button"@click="progressBar.done()">Completes the progress</button></template><script>import {getCurrentInstance,inject }from'vue';exportdefault {setup() {// Get from global propertiesconstapp=getCurrentInstance();constprogressBar=app.appContext.config.globalProperties.$Progressbar;// Get from provideconstinjectProgressBar=inject('Progressbar');return { progressBar, injectProgressBar }  }}</script>

Control progress

import{VueProgressbar}from'@jambonn/vue-next-progressbar';VueProgressbar.start();VueProgressbar.done();

Configuration

trickleSpeed

import{createApp}from'vue';importVueNextProgressbarfrom'@jambonn/vue-next-progressbar';importAppfrom'./App.vue';constapp=createApp(App);constoptions={trickleSpeed:500,// default: 800};app.use(VueNextProgressbar,options);

Compiles and hot-reloads for development

yarn installyarn dev

Compiles and minifies for production

yarn build

License