Vue next progressbar
Slim progress bars for Vue 3.
Table of Contents
Installation
npm install @jambonn/vue-next-progressbar
or if you prefer yarn
yarn add @jambonn/vue-next-progressbar
Usage
Global
You may install Vue next progressbar globally:
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import VueNextProgressbar from '@jambonn/vue-next-progressbar'
import App from './App.vue'
const app = createApp(App)
app.use(createRouter({
history: createWebHistory(),
routes: [],
}));
app.use(VueNextProgressbar, { router: true })
app.mount('#app')
Use in component
When install global Vue next progressbar, you can control progress in component
<template>
<button type="button" @click="progressBar.start()">Shows the progress bar</button>
<button type="button" @click="progressBar.done()">Completes the progress</button>
</template>
<script>
import { getCurrentInstance, inject } from 'vue'
export default {
setup() {
// Get from global properties
const app = getCurrentInstance()
const progressBar = app.appContext.config.globalProperties.$Progressbar
// Get from provide
const injectProgressBar = inject('Progressbar');
return { progressBar, injectProgressBar }
}
}
</script>
Control progress
Simply call start() and done() to control the Vue next progress bar.
import { VueProgressbar } from '@jambonn/vue-next-progressbar'
VueProgressbar.start();
VueProgressbar.done();
Compiles and hot-reloads for development
yarn install
yarn dev
then navigate to http://localhost:8080
Compiles and minifies for production
yarn build
License
This project is licensed under the MIT License - see the LICENSE file for details.