How to Build a Tab Component In Vue.js

A great way to create a reusable tabs component in Vue from scratch

Luca Spezzano
NotOnlyCSS
Published in
3 min readOct 4, 2021

--

Vue.js tabs

Tabs are one of the most used components in the UI, we can find them in the most popular CSS frameworks like Bootstrap or libraries of UI components like TailwindUI.

They can have different styles but their main job is to change the content at the click of a button while staying on the same page.

Once I used to work with the tabs of Bootstrap on my projects but starting to work with Vue.js and TailwindCSS I had to think about how to develop this component from scratch.

Creating tabs on a page with Vue.js is very easy, but creating a reusable component in a project that is flexible enough to allow the parent to choose the content is certainly more complex.

Today we are going to develop a reusable tabs component step by step.

Intro to development

During this example, I will not go into topics like v-for ,v-if etc. but I will try to explain the things that could cause more doubts.

I have prepared two examples, the one you will read below without style, and the one you will find in the demo on Codesandbox where I used TailwindCSS to make it prettier

In the example you will see below, we will focus more on features without any CSS style. (You will only see 1 CSS class that will align the content vertically or horizontally)

If you want to see the version with the addition of some CSS classes you can see the demo here.

Creating the AppTabs.vue component

Let’s start by creating our core component: AppTabs.vue

--

--

Luca Spezzano
NotOnlyCSS

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.