GitHub - jambonn/vue-next-progressbar: Slim progress bars for Vue 3. (original) (raw)

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

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();

Configuration

trickleSpeed

Adjust how often to trickle/increment, in ms.

import { createApp } from 'vue'; import VueNextProgressbar from '@jambonn/vue-next-progressbar'; import App from './App.vue';

const app = createApp(App); const options = { trickleSpeed: 500, // default: 800 }; app.use(VueNextProgressbar, options);

Compiles and hot-reloads for development

then navigate to http://localhost:8080

Compiles and minifies for production

License

This project is licensed under the MIT License - see the LICENSE file for details.