Slim Progress Bar Plugin For Vue 3

Install & Download:

# NPM
$ npm i @marcoschulte/vue3-progress

Description:

A minimal Vue 3 progress bar plugin that supports multiple simultaneous progresses.

How to use it:

1. Import and register the progress bar plugin.

import {createApp} from 'vue';
import App from './App.vue';
import {Vue3ProgressPlugin} from '@marcoschulte/vue3-progress';
createApp(App)
  .use(Vue3ProgressPlugin)
  .mount('#app');

// stylesheet
@import "~@marcoschulte/vue3-progress/dist/";

2. Add the progress bar component to the template.

<template>
  <vue3-progress-bar></vue3-progress-bar>
</template>

3. Start & stop the progress bar.

import {useProgress} from '@marcoschulte/vue3-progress';
const progress = useProgress().start();
progress.finish();

// OR via global property
const progress = this.$progress.start();
progress.finish();

Preview: