概要

プログレスバーを簡単に実装できる vue-progressbar ライブラリを使って再利用可能なプログレスバーを表示するコンポーネントを作ります。

プロジェクトの作成

VueCLI の vue create コマンドで適当なプロジェクトを作成します。
このとき vue-router も一緒にインストールしておきましょう。

プロジェクトが作成されたらライブラリをインストールします。

npm install vue-progressbar

main.js を開いて、ライブラリを読み込ませます。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueProgressBar from "vue-progressbar";

Vue.config.productionTip = false;

Vue.use(VueProgressBar);

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

コンポーネントの実装

src/components フォルダに ProgressBar.vue ファイルを作成します。

<template>
  <vue-progress-bar></vue-progress-bar>
</template>

<script>
  export default {
    name: "ProgressBar",
    mounted() {
      this.$Progress.finish();
    },
    created() {
      this.$Progress.start();
      this.$router.beforeEach((to, from, next) => {
        this.$Progress.parseMeta({});
        this.$Progress.start();
        next();
      });
      this.$router.afterEach(() => {
        this.$Progress.finish();
      });
    },
  };
</script>

これでプログレスバーコンポーネントが用意できました。
さっそく App.vue からインポートして使ってみます。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
    <ProgressBar />
  </div>
</template>

<script>
  import ProgressBar from "@/components/ProgressBar";
  export default {
    name: "App",
    components: { ProgressBar },
  };
</script>

npm run serve でローカルサーバーを起動して localhost:8080 へアクセスします。
Home や About のリンクをクリックすると上部にプログレスバーが表示されているはずです。

スタイルを変更する

プログレスバーの色や幅を変更したい場合があります。

もう一度、main.js を開きます。
そして、Vue.use で VueProgressBar プラグインを読み込む箇所にオプションを渡すように変更します。

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

Vue.use(VueProgressBar, options);

色は color 、幅は thickness の値で調整できます。
そのほかにもパラメータがありますが詳しくは Github リポジトリ を参照してください。