https://github.com/jambonn/vue-next-progressbar

Slim progress bars for Vue 3.
https://github.com/jambonn/vue-next-progressbar

Last synced: about 2 months ago
JSON representation

Slim progress bars for Vue 3.

• Host: GitHub
• URL: https://github.com/jambonn/vue-next-progressbar
• Owner: jambonn
• License: mit
• Created: 2021-07-05T07:31:22.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-20T03:51:29.000Z (3 months ago)
• Last Synced: 2024-03-20T04:43:57.261Z (3 months ago)
• Language: JavaScript
• Homepage: vue-next-progressbar.vercel.app
• Size: 98.6 KB
• Stars: 8
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-vue - vue-next-progressbar - Slim progress bars(1KB gzipped) for Vue 3. (Components & Libraries / UI Components)
• awesome-vue - vue-next-progressbar - Slim progress bars(1KB gzipped) for Vue 3. (Components & Libraries / UI Components)
• awesome-stars - jambonn/vue-next-progressbar - Slim progress bars for Vue 3. (JavaScript)
• awesome-vue - vue-next-progressbar - Slim progress bars(1KB gzipped) for Vue 3. (Components & Libraries / UI Components)

README

        
# Vue next progressbar

> Slim progress bars for Vue 3.

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [Development](#compiles-and-hot-reloads-for-development)

- [License](#license)

## Installation

``` bash

npm install @jambonn/vue-next-progressbar

```

or if you prefer yarn

``` bash

yarn add @jambonn/vue-next-progressbar

```

## Usage

### Global

You may install Vue next progressbar globally:

```js

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

```vue

  Shows the progress bar

  Completes the progress

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 }

  }

}

```

### Control progress

Simply call start() and done() to control the Vue next progress bar.

```js

import { VueProgressbar } from '@jambonn/vue-next-progressbar';

VueProgressbar.start();

VueProgressbar.done();

```

### Configuration

#### `trickleSpeed`

Adjust how often to trickle/increment, in ms.

```js

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

``` bash

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](LICENSE) file for details.