Vue3 Progress Bar

A infinite progress bar for vue 3

• Demo
• GitHub

Requirements

• Vue.js ^3.0.0

Installation

npm

npm i @ctechhindi/vue3-progress-bar

Usage

main.js

// Load
import Vue3ProgressBar from "@ctechhindi/vue3-progress-bar";
app.use(Vue3ProgressBar, {
  // "height": "5px",
  // "customStyle": {
  //   width: "100 %",
  //   height: "100 %",
  //   position: "absolute",
  //   background: "linear-gradient(45deg, #da7748, #d11111)",
  //   left: "0 %",
  // },
});

App.vue

<!-- Composition API -->

<script setup>
import { onMounted, inject } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const progress = inject("progress");

router.beforeEach((to, from, next) => {
  progress.start();
  next();
});

router.afterEach((to, from) => {
  // progress.finish();
});

onMounted(async () => {
  // progress.finish();
});
</script>

<template>
  <Vue3ProgressBar></Vue3ProgressBar>
  <RouterView />
</template>

<!-- Options API -->
<template>
  <div id="app">
    <Vue3ProgressBar></Vue3ProgressBar>
    <RouterView />
  </div>
</template>

<script>
export default {
  mounted() {
    this.$progress.finish();
  },
  created() {
    this.$progress.start();

    this.$router.beforeEach((to, from, next) => {
      this.$progress.start();
      next();
    });

    this.$router.afterEach((to, from) => {
      this.$progress.finish();
    });
  },
};
</script>

License

MIT License