Add a Progress Bar to Your Vue.js App with Vue-ProgressBar

A progress bar is a line that shows how close to completion something is in a GUI app. It 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 to 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 displays 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: