@jambonn/vue-next-progressbar

Vue next progressbar

Slim progress bars for Vue 3.

Table of Contents

• Installation
• Usage
• Development
• License

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.