How to Create Progress Bar using Flowbite in Vue 3

Last Updated on by in Vue Tutorial

In this post, we will teach you how to create a basic progress bar UI component using Flowbite and Tailwind in Vue js application.

A progress bar is a UI design element that is especially used in UI layouts to show the progress of an event or task.

It is ideally a horizontal bar that gradually starts filling from left to right vindicating the progress of a task.

To build the Progress bar in Vue we will use the Flowbite Vue library. Flowbite Vue is a handy package that solves the problem of creating essential UI components.

Today, in this guide we will show you from starting to finish how to implement Vue progress bar component in Vue component using Tailwind CSS.

Vue Tailwind Progress Bar Tutorial

Here are the quintessential steps that you need to follow based on a given series to assimilate progress bar functionality in Vue.

  • Step 1: Create Vue Project
  • Step 2: Install Vue Flowbite
  • Step 3: Define Tailwind CSS
  • Step 4: Make Component File
  • Step 5: Integrate Progress Bar
  • Step 6: Register Component
  • Step 7: View App on Browser

Create Vue Project

Node js helps users to develop JavaScript based apps on their system. It is basically a JavaScript run time environment and you can get it from here: https://nodejs.org/

After the Node and NPM installed, we are going to install Vue command line interface tool.

The Vue CLI tool helps developers to scaffolds, build and manage Vue js applications.

npm install -g @vue/cli

We are now ready to setup a new Vue project, we can execute the following command that orders Vue cli to install a brand new Vue project.

vue create vue-demo-app

Select Vue 3 from the Vue CLI options list.

Get inside the Vue application’s folder:

cd vue-demo-app

Install Vue Flowbite

To attain all the benefits of Vue Flowbite, we will have to install the library using the npm command.

 npm install flowbite flowbite-vue --legacy-peer-deps

Define Tailwind CSS

To simplify the user interface component’s development process we will setup the Tailwind CSS.

To incorporate Tailwind in Vue, you will have to open the and define the given code in the public/index.html file.

<!doctype html>
<html>
<head>
  ...
  ...
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
   
</body>
</html>

Make Component File

Head over to components/ folder, here you have to create ProgressComp.vue file and insert the below code.

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Create Progress Bar

We can create progress bar using the Progress API, you have to place the Progress module within the template prop.

You can play with style, size and colour of the progress bar in Vue. You can define the progress of an event using the progress prop.

Similarly, you can go with sizes, with small, medium, large and extra large. You can click here to check the further customization of Vue progress bar module.

Add following code in components/ProgressComp.vue file:

<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
  <Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>

Register Component

We are now injecting the progress bar component by importing it to the Vue’s primary App.vue file.

<template>
  <div class="mx-auto max-w-2xl lg:max-w-5xl">
    <h2 class="text-2xl font-bold tracking-tight sm:text-3xl mb-6 mt-6">
      Vue Tailwind Progress Bar Component Example
    </h2>
    <ProgressComp />
  </div>
</template>
<script>
import ProgressComp from "./components/ProgressComp.vue";
export default {
  components: {
    ProgressComp,
  },
};
</script>

View App on Browser

We can now invoke the Vue’s development server using the given command.

npm run serve

You can now view the feature on the browser.

http://localhost:8080

How to Create Progress Bar using Flowbite in Vue

❤️ Checkout Popular CSS Collection

Digamber - Author positronX.io

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.