Vue 3 Flowbite Tabs Component Tailwind Tutorial

Last Updated on by in Vue JS

In this tutorial, I will help you learn how to create Tabs component in Vue js using the Flowbite Vue and Tailwind CSS.

In a web development realm, Tabs component is an integral part of user friendly user interfaces. Tabs allow to place multiple data within a limited space on a web page.

At the same time it helps users to consume the important data that you want to show them.

Throughout this guide, we will show you how to implement Tabs in Vue via a series of steps. The following are the steps that you need to follow to build tabs in Vue component.

Create Interactive Vue 3 Tabs with Flowbite and Tailwind

  • Step 1: Install Vue App
  • Step 2: Add Flowbite Package
  • Step 3: Define Tailwind
  • Step 4: Make Component File
  • Step 5: Create Tabs Component
  • Step 6: Update App Component
  • Step 7: Start Vue Server

Install Vue App

Before we start building the functionality in Vue, ensure that you have set up the Node on your system. If not then visit: https://nodejs.org/.

Creating and running a Vue app involves various steps, let us begin by installing Vue CLI:

npm install -g @vue/cli

Once the installation of Vue CLI is done, be ready to install a new Vue application.

vue create vue-demo-app

Vue CLI asks which version to install, make sure to select Vue 3.

Let’s enter into the project:

cd vue-demo-app

Add Flowbite Package

We can now install the flowbite and flowbite-vueessential packages using the following command:

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

Define Tailwind in Vue

After the Flowbite is installed, it is time to define the Tailwind CSS link inside the head section of 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

Furthermore, you have to create components/TabsComp.vue file.

<template>
    <div>
        
    </div>
</template>

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

Create Tabs Component

The tabs props are used to create tabs, the tab prop invokes the tab section in Vue. You can set tab names using the name prop.

Add code in the components/TabsComp.vue file:

<script setup>
import { ref } from "vue";
import { Tabs, Tab } from "flowbite-vue";
const activeTab = ref("first");
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5">
    <tab name="first" title="First">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id mi facilisis,
      malesuada dolor eget, feugiat libero.
    </tab>
    <tab name="second" title="Second">
      Donec eleifend dapibus turpis, vitae porta odio dictum sed.
    </tab>
    <tab name="third" title="Third">
      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos.
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Quisque dapibus massa non dapibus ornare.
    </tab>
  </tabs>
</template>

Update App Component

We are now finally going to register the TabsComp component in the 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 3 Tailwind Tabs Component Example
    </h2>
    <TabsComp />
  </div>
</template>

<script>
import TabsComp from "./components/TabsComp.vue";

export default {
  components: {
    TabsComp,
  },
};
</script>

Start Vue Server

We can now start the development server using the suggested command:

npm run serve

The above command will start the development server and serve your Vue app on.

http://localhost:8080

Vue 3 Flowbite Tabs Component Tailwind Tutorial

Conclusion

Tabs are an ideal UI pattern that maximizes the user experience of the user though: enabling modularity, interactivity and less code.

It allows us to organizing content in a proper user-friendly manner. In this guide we have learned how to build tabs in Vue js that help developers to place content into visible sections.

Reference: https://flowbite-vue.com/components/tabs