Category: Vue

Gauge charts are handy for showing if something is close to the maximum or minimum amount. It’s handy for visualizing any quantities that have maximum or minimum values. Making our own would be a real pain since we have to draw shapes, lines and text on the canvas to create the gauge. Fortunately, developers have created premade solutions for us to use.

For Vue.js apps, we can use the VGauge library, located at https://github.com/amroessam/vgauge, to put gauges on our own apps. In this article, we will create a piggy bank app that lets users set their goals for saving and add their amount of money saved for a given date. We will display displaying the gauge to let users know if they reached their savings goal or not. To start, we will run the Vue CLI by running:

npx @vue/cli create piggy-bank

In the wizard, we select the ‘Manually select features’ and select Vue Router, Vuex, and Babel.

Next we install some packages. We will use Axios for making HTTP requests, BootstrapVue for styling, VGauge for displaying the gauge for showing their savings relative to their goal, VueFilterDateFormat for formatting dates in templates, and Vee-Validate for form validation. To install them, we run:

npm i axios bootstrap-vue vgauge vee-validate vue-filter-date-format

Now we can being building our app. Create a file called GoalForm.vue in the components folder and add:

<template>
  <ValidationObserver ref="observer" v-slot="{ invalid }">
    <b-form @submit.prevent="onSubmit" novalidate>
      <b-form-group label="Savings Amount Goal">
        <ValidationProvider name="amount" rules="required|min_value:0" v-slot="{ errors }">
          <b-form-input
            type="text"
            :state="errors.length == 0"
            v-model="form.amount"
            required
            placeholder="Savings Amount Goal"
            name="amount"
          ></b-form-input>
          <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
        </ValidationProvider>
      </b-form-group>

<b-button type="submit" variant="primary">Save</b-button>
    </b-form>
  </ValidationObserver>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  name: "SavingForm",
  mixins: [requestsMixin],
  data() {
    return {
      form: {}
    };
  },
  computed: {
    goal() {
      return this.$store.state.goal;
    }
  },
  beforeMount() {
    this.getSavingsGoal();
  },
  methods: {
    cancel() {
      this.$emit("cancelled");
    },

async getSavingsGoal() {
      const { data } = await this.getGoal();
      this.$store.commit("setGoal", data);
    },

async onSubmit() {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        return;
      }
      await this.setGoal(this.form);

const { data } = await this.getSavings();
      this.$store.commit("setGoal", data);
      this.$emit("saved");
    }
  },
  watch: {
    goal: {
      handler(val) {
        this.form = val || {};
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

The file is the form for letting users entering their savings goal. We have a getSavingsGoal function for getting the savings of the user from back end. It’s called in the beforeMount hook and at the end of the onSubmit function to get the latest values.

In the onSubmit function, we validate our form with Vee-Validate by calling this.$refs.observer.validate(); to make sure amount is entered and that it’s 0 or higher before saving it. We use Vee-Validate to validate the form fields. The ValidationObserver component is for validating the whole form, while the ValidationProvider component is for validating the form fields that it wraps around. The validation rule is specified by the rule prop of the amount field. The state prop is for setting the validation state which shows the green when errors has length 0 and red otherwise. The error messages are shown in the b-form-invalid-feedback component. This page only has the countries drop down.

Then create a SavingForm.vue file in the same folder and add:

<template>
  <ValidationObserver ref="observer" v-slot="{ invalid }">
    <b-form @submit.prevent="onSubmit" novalidate>
      <b-form-group label="Date">
        <ValidationProvider name="date" rules="required|date" v-slot="{ errors }">
          <b-form-input
            type="text"
            :state="errors.length == 0"
            v-model="form.date"
            required
            placeholder="Date"
            name="date"
          ></b-form-input>
          <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
        </ValidationProvider>
      </b-form-group>

<b-form-group label="Amount Saved">
        <ValidationProvider name="amount" rules="required|min_value:0" v-slot="{ errors }">
          <b-form-input
            type="text"
            :state="errors.length == 0"
            v-model="form.amount"
            required
            placeholder="Amount Saved"
            name="amount"
          ></b-form-input>
          <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
        </ValidationProvider>
      </b-form-group>

<b-button type="submit" variant="primary">Save</b-button>
    </b-form>
  </ValidationObserver>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";
import * as moment from "moment";

export default {
  name: "SavingForm",
  props: {
    saving: Object,
    edit: Boolean
  },
  mixins: [requestsMixin],
  data() {
    return {
      form: {}
    };
  },
  computed: {
    savings() {
      return this.$store.state.savings;
    }
  },
  methods: {
    cancel() {
      this.$emit("cancelled");
    },

    async onSubmit() {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        return;
      }
      const offDate = new Date(this.form.date);
      const correctedDate = new Date(
        offDate.getTime() + Math.abs(offDate.getTimezoneOffset() * 60000)
      );

      const params = {
        ...this.form,
        date: correctedDate
      };

      if (!this.edit) {
        await this.addSaving(params);
      } else {
        await this.editSaving(params);
      }
      const { data } = await this.getSavings();
      this.$store.commit("setSavings", data);
      this.$emit("saved");
    }
  },
  watch: {
    saving: {
      handler(val) {
        this.form = JSON.parse(JSON.stringify(val || {}));
        if (this.form.date) {
          this.form.date = moment(this.form.date).format("YYYY-MM-DD");
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

The file is the form for letting users entering their savings data. We have a form with the date and amount fields to let users save their savings amount for the date they entered.

In the onSubmit function, we validate our form with Vee-Validate by calling this.$refs.observer.validate(); to make sure and date and amount are entered and that date is in YYYY-MM-DD format and amount is 0 or higher before saving it. We use Vee-Validate to validate the form fields. The ValidationObserver component is for validating the whole form, while the ValidationProvider component is for validating the form fields that it wraps around. The validation rule is specified by the rule prop of the form fields. date is a custom made validation rule that we will add. The state prop is for setting the validation state which shows the green when errors has length 0 and red otherwise. The error messages are shown in the b-form-invalid-feedback component. This page only has the countries drop down.

Next we create amixins folder in the src folder and create a file called requestsMixin.js file. In there, we add:

const APIURL = "[http://localhost:3000](http://localhost:3000)";
const axios = require("axios");

export const requestsMixin = {
  methods: {
    getSavings() {
      return axios.get(`${APIURL}/savings`);
    },

    addSaving(data) {
      return axios.post(`${APIURL}/savings`, data);
    },

    editSaving(data) {
      return axios.put(`${APIURL}/savings/${data.id}`, data);
    },

    deleteSaving(id) {
      return axios.delete(`${APIURL}/savings/${id}`);
    },

    getGoal() {
      return axios.get(`${APIURL}/goal`);
    },

    setGoal(data) {
      return axios.post(`${APIURL}/goal`, data);
    }
  }
};

These are the functions to get and save our savings and savings goal data to back end.

Next in the views folder, we replace the code in the Home.vue file with:

<template>
  <div class="page">
    <h1 class="text-center">Piggy Bank App</h1>

    <b-button-toolbar class="button-toolbar">
      <b-button @click="openAddModal()" variant="primary">Add Money Saved</b-button>
      <b-button @click="openGoalModal()" variant="primary">Set Saving Goal</b-button>
    </b-button-toolbar>

    <div class="text-center" v-if="goal && totalSavings">
      <v-gauge :maxValue="+goal" :minValue="0" :value="+totalSavings" unit="USD" top />
      <p>Savings goal is {{+goal}} USD.</p>
    </div>

    <b-modal id="add-modal" title="Add Money Saved" hide-footer>
      <SavingForm@saved="closeModal()" @cancelled="closeModal()" :edit="false" />
    </b-modal>

    <b-modal id="edit-modal" title="Edit Money Saved" hide-footer>
      <SavingForm
       @saved="closeModal()"
        @cancelled="closeModal()"
        :edit="true"
        :saving="selectedSaving"
      />
    </b-modal>

    <b-modal id="goal-modal" title="Set Saving Goal" hide-footer>
      <GoalForm@saved="closeModal()" @cancelled="closeModal()" />
    </b-modal>

    <b-table-simple responsive>
      <b-thead>
        <b-tr>
          <b-th sticky-column>Date</b-th>
          <b-th>Money Saved</b-th>
          <b-th>Edit</b-th>
          <b-th>Delete</b-th>
        </b-tr>
      </b-thead>
      <b-tbody>
        <b-tr v-for="s in savings" :key="s.id">
          <b-th sticky-column>{{ new Date(s.date) | dateFormat('YYYY-MM-DD') }}</b-th>
          <b-td>{{s.amount}}</b-td>
          <b-td>
            <b-button @click="openEditModal(s)">Edit</b-button>
          </b-td>
          <b-td>
            <b-button @click="deleteOneSaving(s.id)">Delete</b-button>
          </b-td>
        </b-tr>
      </b-tbody>
    </b-table-simple>
  </div>
</template>

<script>
// @ is an alias to /src
import SavingForm from "@/components/SavingForm.vue";
import GoalForm from "@/components/GoalForm.vue";
import { requestsMixin } from "@/mixins/requestsMixin";
import VGauge from "vgauge";

export default {
  name: "home",
  components: {
    SavingForm,
    GoalForm,
    VGauge
  },
  mixins: [requestsMixin],
  data() {
    return {
      selectedSaving: {},
      goal: 0,
      totalSavings: 0
    };
  },
  computed: {
    savings() {
      return this.$store.state.savings.sort(
        (a, b) => +new Date(b.date) - +new Date(a.date)
      );
    }
  },
  beforeMount() {
    this.getAllSavings();
    this.getSavingsGoal();
  },
  methods: {
    openAddModal() {
      this.$bvModal.show("add-modal");
    },

    openEditModal(saving) {
      this.$bvModal.show("edit-modal");
      this.selectedSaving = saving;
    },

    closeModal() {
      this.$bvModal.hide("add-modal");
      this.$bvModal.hide("edit-modal");
      this.$bvModal.hide("goal-modal");
      this.getSavingsGoal();
      this.getAllSavings();
    },

    openGoalModal() {
      this.$bvModal.show("goal-modal");
    },

    async getAllSavings() {
      this.totalSavings = 0;
      const { data } = await this.getSavings();
      this.$store.commit("setSavings", data);
      this.totalSavings = +this.$store.state.savings
        .map(s => s.amount)
        .reduce((a, b) => +a + +b, 0);
    },

    async deleteOneSaving(id) {
      await this.deleteSaving(id);
      this.getAllSavings();
    },

    async getSavingsGoal() {
      this.goal = 0;
      const { data } = await this.getGoal();
      this.goal = +data.amount;
    }
  }
};
</script>

We have buttons to add saving data as well as edit and delete them in each row. The Add Money Saved and Set Saving Goal will open modals with the SavingForm and GoalForm respectively. We use the SavingForm for both adding and editing saving entries.

The savings data is obtained from back end and saved in our Vuex store. Once it’s there, we get the data in the computed property and then display the data from the computed property.

We have a table to display the saving data entered. We sort it by date descending date to display them in reverse chronological order. In the scripts section, we have the beforeMount hook to get all the password entries during page load with the getAllSavings function we wrote in our mixin. When the Edit button is clicked, the selectedSavingvariable is set, and we pass it to the SavingForm for editing.

To delete a recipe, we call deleteSavingin our mixin to make the request to the back end via the deleteOneSaving function.

The VGauge component is used here. The v-gauge element in the template will display the gauge graph. The maxValue prop is set to our saving goal, which is stored in the goal variable, and the value prop is set to the totalSavings variable. The units is set to USD and it’s displayed at the end of the amount, and the top prop makes the value display on the top of the gauge. The v-if=”goal && totalSavings” is very important. It allows us to refresh the graph by setting goal and totalSavings to 0 then setting the values obtained from the store or back end again. We did this in the getAllSavings and getSavingsGoal functions.

Next in App.vue , we replace the existing code with:

<template>
  <div id="app">
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-brand to="/">Piggy Bank App</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/" :active="path  == '/'">Home</b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <router-view />
  </div>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  mixins: [requestsMixin],
  data() {
    return {
      path: this.$route && this.$route.path
    };
  },
  watch: {
    $route(route) {
      this.path = route.path;
    }
  },
  beforeMount() {
    this.getSavingsGoal();
  },
  methods: {
    async getSavingsGoal() {
      const { data } = await this.getGoal();
      this.$store.commit("setGoal", data);
    }
  }
};
</script>

<style lang="scss">
.page {
  padding: 20px;
}

button,
.btn.btn-primary {
  margin-right: 10px !important;
}

.button-toolbar {
  margin-bottom: 10px;
}
</style>

to add a Bootstrap navigation bar to the top of our pages, and a router-view to display the routes we define. This style section isn’t scoped so the styles will apply globally. In the .page selector, we add some padding to our pages. We also add margins to our app’s buttons here.

In the script section, we get the savings goal by calling this.getSavingsGoal and put them in our Vuex store.

Next in main.js , we replace the existing code with:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import { ValidationProvider, extend, ValidationObserver } from "vee-validate";
import { required, min_value } from "vee-validate/dist/rules";
import VueFilterDateFormat from "vue-filter-date-format";

extend("required", required);
extend("min_value", min_value);
extend("date", {
  validate: value =>
    /([12]d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]d|3[01]))/.test(value),
  message: "Date must be in YYYY-MM-DD format"
});
Vue.use(VueFilterDateFormat);
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
Vue.use(BootstrapVue);

Vue.config.productionTip = false;

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

We added all the libraries we need here, including BootstrapVue JavaScript and CSS, Vee-Validate components along with the validation rules. We created the date rule which verifies that the inputs that used the rule will be in YYYY-MM-DD format. Also, we added the VueFilterDateFormat package to format the dates in the Date column of our table in Home.vue .

In router.js we replace the existing code with:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    }
  ]
});

to include the home page in our routes so users can see the page.

And in store.js , we replace the existing code with:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    savings: [],
    goal: {}
  },
  mutations: {
    setSavings(state, payload) {
      state.savings = payload;
    },

    setGoal(state, payload) {
      state.goal = payload;
    }
  },
  actions: {}
});

to add our recipes state to the store so we can observer it in the computed block of GoalForm,SavingForm, and HomePage components. We have the setSavings function to update the savings state and we use it in the components by call this.$store.commit(“setSavings”, data); like we did in SavingForm , and the setGoal to set the savings goal data for the GoalForm and HomePage .

Finally, in index.html , we replace the existing code with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>Piggy Bank App</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but vgauge-tutorial-app doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

to change the title.

After all the hard work, we can start our app by running npm run serve.

To start the back end, we first install the json-server package by running npm i json-server. Then, go to our project folder and run:

json-server --watch db.json

In db.json, change the text to:

{
  "savings": [],
  "goal": {}
}

So we have the savings and goal endpoints defined in the requests.js available.

After all the hard work, we get:

A progress bar is a line that shows how close to completion something is in a GUI app. It’s provides a good user experience for users because they can know when something is complete and how close to completion it is, making users’ minds more comfortable.

Vue.js has many progress bar libraries built for it. One of them is Vue-ProgressBar, located at https://github.com/hilongjw/vue-progressbar. It is easy too incorporate to any Vue.js app and it’s very flexible, with lots of options you can change.

In this article, we will build an app that display Chuck Norris jokes from the Chuck Norris Jokes API, located at https://api.chucknorris.io/. The app will have a home page for displaying a random joke, a page that lets users look for a random joke by category, and a search page to search for jokes. To start, we will run the Vue CLI by running:

npx @vue/cli create chuck-norris-app

In the wizard, we select the ‘Manually select features’ and select Vue Router and Babel.

Next we install some packages. We will use Axios for making HTTP requests, BootstrapVue for styling, Vue-ProgressBar for adding our progress bar, and Vee-Validate for form validation. To install them, we run:

npm i axios bootstrap-vue vue-progressbar vee-validate

Next we create amixins folder in the src folder and create a file called requestsMixin.js file. In there, we add:

const APIURL = "https://api.chucknorris.io/jokes";
const axios = require("axios");

export const requestsMixin = {
  methods: {
    getRandomJoke() {
      return axios.get(`${APIURL}/random`);
    },

    getJokeByCategory(category) {
      return axios.get(`${APIURL}/random?category=${category}`);
    },

    getCategories() {
      return axios.get(`${APIURL}/categories`);
    },

    searchJokes(query) {
      return axios.get(`${APIURL}/search?query=${query}`);
    }
  }
};

This file has the code to call all the endpoints of the Chuck Norris Jokes API to get the jokes and categories, and also search for jokes by keyword.

Next in the views folder, we replace the code in the Home.vue file with:

<template>
  <div class="page">
    <h1 class="text-center">Random Joke</h1>
    <p>{{joke.value}}</p>
  </div>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  name: "home",
  mixins: [requestsMixin],
  data() {
    return {
      joke: {}
    };
  },
  beforeMount() {
    this.$Progress.start();
    this.getJoke();
  },
  methods: {
    async getJoke() {
      const { data } = await this.getRandomJoke();
      this.joke = data;
      this.$Progress.finish();
    }
  }
};
</script>

With the Vue-ProgressBar libary, we have the this.$Progress object available in all our components since we will add it to main.js . We call the this.$Progress.start(); to display the progress bar right before the HTTP request is made by calling the this.getRandomJoke function from requestsMixin . Then once the response is successfully retrieved, then we call this.$Progress.finish(); to make the progress bar disappear. In the template, we display the joke.

Next create a file calledJokeByCategory.vue in the views folder and add:

<template>
  <div class="page">
    <h1 class="text-center">Joke by Category</h1>
    <ValidationObserver ref="observer" v-slot="{ invalid }">
      <b-form novalidate>
        <b-form-group label="Category">
          <ValidationProvider name="category" rules="required" v-slot="{ errors }">
            <b-form-select v-model="category" :options="categories" @change="getJoke()"></b-form-select>
            <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
          </ValidationProvider>
        </b-form-group>
      </b-form>
    </ValidationObserver>

<p>{{joke.value}}</p>
  </div>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  mixins: [requestsMixin],
  data() {
    return {
      category: "",
      categories: [],
      joke: {}
    };
  },
  beforeMount() {
    this.getJokeCategories();
  },

  methods: {
    async getJokeCategories() {
      this.$Progress.start();
      const { data } = await this.getCategories();
      this.categories = data.map(d => ({
        value: d,
        text: d
      }));
      this.$Progress.finish();
    },

    async getJoke() {
      this.$Progress.start();
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        this.$Progress.finish();
        return;
      }
      const { data } = await this.getJokeByCategory(this.category);
      this.joke = data;
      this.$Progress.finish();
    }
  }
};
</script>

In the beforeMount hook, we run the getJokeCategories , which call this.getCategories from the requestsMixin to get the categories when the page loads.

This page works the same as Home.vue . We display the progress bar when requests are started and remove it when the request is finished. This file makes 2 requests, one to get the categories from the API withn the this.categories function from the requestsMixin and the this.getJokesByCategory function from the same file. In the getJoke function, we validate our form with Vee-Validate by calling this.$refs.observer.validate(); to make sure category is selected before getting the joke. We use Vee-Validate to validate the form fields. The ValidationObserver component is for validating the whole form, while the ValidationProvider component is for validating the form fields that it wraps around. The validation rule is specified by the rule prop of the category field. The state prop is for setting the validation state which shows the green when errors has length 0 and red otherwise. The error messages are shown in the b-form-invalid-feedback component. This page only has the countries drop down.

Next, we add a Search.vue file in the views folder and add:

<template>
  <div class="page">
    <h1 class="text-center">Search</h1>
    <ValidationObserver ref="observer" v-slot="{ invalid }">
      <b-form novalidate @submit.prevent="onSubmit">
        <b-form-group label="Keyword">
          <ValidationProvider name="keyword" rules="required" v-slot="{ errors }">
            <b-form-input
              type="text"
              :state="errors.length == 0"
              v-model="keyword"
              required
              placeholder="Search "
              name="keyword"
            ></b-form-input>
            <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
          </ValidationProvider>
        </b-form-group>

<b-button type="submit" variant="primary">Search</b-button>
      </b-form>
    </ValidationObserver>

<p v-for="(j, i) of jokes" :key="i">{{j.value}}</p>
  </div>
</template>

<script>
import { requestsMixin } from "@/mixins/requestsMixin";

export default {
  mixins: [requestsMixin],
  data() {
    return {
      keyword: "",
      jokes: []
    };
  },
  methods: {
    async onSubmit() {
      this.$Progress.start();
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        this.$Progress.finish();
        return;
      }
      const {
        data: { result }
      } = await this.searchJokes(this.keyword);
      this.jokes = result;
      this.$Progress.finish();
    }
  }
};
</script>

We let users search for jokes from the API.

In the onSubmit function, we validate our form with Vee-Validate by calling this.$refs.observer.validate(); to make sure category is selected before getting the joke. We use Vee-Validate to validate the form fields. The ValidationObserver component is for validating the whole form, while the ValidationProvider component is for validating the form fields that it wraps around. The validation rule is specified by the rule prop of the category field. The state prop is for setting the validation state which shows the green when errors has length 0 and red otherwise. The error messages are shown in the b-form-invalid-feedback component. This page only has the countries drop down.

The progress bar works the same as the other components. We display the progress bar when searching for jokes by calling this.$Progress.start(); , then this.searchJokes and remove it when the request is finished. Finally this.$Progress.finish(); is called to make the progress bar disappear.

Next in App.vue , we replace the existing code with:

<template>
  <div id="app">
    <vue-progress-bar></vue-progress-bar>
    <b-navbar toggleable="lg" type="dark" variant="info">
      <b-navbar-brand to="/">Chuck Norris Jokes App</b-navbar-brand>

<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

<b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/" :active="path  == '/'">Home</b-nav-item>
          <b-nav-item to="/jokebycategory" :active="path  == '/jokebycategory'">Jokes By Category</b-nav-item>
          <b-nav-item to="/search" :active="path  == '/search'">Search</b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: this.$route && this.$route.path
    };
  },
  watch: {
    $route(route) {
      this.path = route.path;
    }
  }
};
</script>

<style lang="scss">
.page {
  padding: 20px;
}

button,
.btn.btn-primary {
  margin-right: 10px !important;
}

.button-toolbar {
  margin-bottom: 10px;
}
</style>

to add a Bootstrap navigation bar to the top of our pages, and a router-view to display the routes we define.

Next in main.js , replace the code with:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import { ValidationProvider, extend, ValidationObserver } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import VueProgressBar from "vue-progressbar";

extend("required", required);
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
Vue.use(BootstrapVue);
Vue.use(VueProgressBar, {
  color: "rgb(143, 255, 199)",
  failedColor: "red",
  height: "2px"
});

Vue.config.productionTip = false;

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

so that we add the libraries we installed to our app so we can use it in our components. We call extend from Vee-Validate to add the form validation rules that we want to use. Also, we add the Vue-ProgressBar library here so we can use it in all our components. When we include it with Vue.use , we pass in the progress bar options as the second argument. In this app, we set the color to a greenish color, failed color to be red, and the height to be 2 pixels. We also imported the Bootstrap CSS in this file to get the styles.

In router.js , we replace the existing code with:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import JokeByCategory from './views/JokeByCategory.vue'
import Search from './views/Search.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/jokebycategory',
      name: 'jokebycategory',
      component: JokeByCategory
    },
    {
      path: '/search',
      name: 'search',
      component: Search
    }
  ]
})

to include our home and search pages.

Finally, in index.html , replace the existing code with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>Chuck Norris Jokes App</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but vue-progress-bar-tutorial-app doesn't work properly
        without JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

to change the title.

After all the hard work, we can start our app by running npm run serve. Finally, we get: