Vue 3 Progressbar

Previously, we would like to first thank for the developers who have been willing to help developers around the world, especially those who contribute to hilongjw/vue-progressbar. Here I continue from the previous development to provide support for vuejs version 3.

Table of Contents

• Demo
• Requirements
• Installation
• Usage
• Constructor Options
• Implementation
• vue-router
  • meta options
• Methods
• Examples
• License

Demo

Demo

Requirements

• Vue.js 3.x

Installation

# npm
$ npm install @aacassandra/vue3-progressbar

Usage

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueProgressBar from "@aacassandra/vue3-progressbar";

const options = {
  color: "#bffaf3",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300,
  },
  autoRevert: true,
  location: "left",
  inverse: false,
};

createApp(App)
  .use(VueProgressBar, options)
  .use(router)
  .mount("#app");

Constructor Options

Implementation

App.vue

<template>
  <div id="app">
    <!-- for example router view -->
    <router-view></router-view>
    <!-- set progressbar -->
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
  export default {
    mounted() {
      //  [App.vue specific] When App.vue is finish loading finish the progress bar
      this.$Progress.finish();
    },
    created() {
      //  [App.vue specific] When App.vue is first loaded start the progress bar
      this.$Progress.start();
      //  hook the progress bar to start before we move router-view
      this.$router.beforeEach((to, from, next) => {
        //  does the page we want to go to have a meta.progress object
        if (to.meta.progress !== undefined) {
          let meta = to.meta.progress;
          // parse meta tags
          this.$Progress.parseMeta(meta);
        }
        //  start the progress bar
        this.$Progress.start();
        //  continue to next page
        next();
      });
      //  hook the progress bar to finish after we've finished moving router-view
      this.$router.afterEach((to, from) => {
        //  finish the progress bar
        this.$Progress.finish();
      });
    },
  };
</script>

vue-router

export default [
  {
    path: "/achievement",
    name: "achievement",
    component: "./components/Achievement.vue",
    meta: {
      progress: {
        func: [
          { call: "color", modifier: "temp", argument: "#ffb000" },
          { call: "fail", modifier: "temp", argument: "#6e0000" },
          { call: "location", modifier: "temp", argument: "top" },
          {
            call: "transition",
            modifier: "temp",
            argument: { speed: "1.5s", opacity: "0.6s", termination: 400 },
          },
        ],
      },
    },
  },
];

vue-router meta options

Methods

Examples

Loading Data (vue-resource)

<script>
  export default {
    methods: {
      test() {
        this.$Progress.start();
        this.$http
          .jsonp(
            "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz"
          )
          .then(
            (response) => {
              this.$Progress.finish();
            },
            (response) => {
              this.$Progress.fail();
            }
          );
      },
    },
  };
</script>

Accessing the progress bar externally through the vue instance (e.g. axios interceptors)

main.js

// main.js from Usage section

Vue.use(VueProgressBar, options);

export default new Vue({
  // export the Vue instance
  ...App,
}).$mount("#app");

api-axios.js

import axios from "axios";
import app from "../main"; // import the instance

const instance = axios.create({
  baseURL: "/api",
});

instance.interceptors.request.use((config) => {
  app.$Progress.start(); // for every request start the progress
  return config;
});

instance.interceptors.response.use((response) => {
  app.$Progress.finish(); // finish when a response is received
  return response;
});

export default instance; // export axios instance to be imported in your app

LICENSE

MIT License

Copyright (c) 2020 Alauddin Afif Cassandra

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

See more about LICENSE