Vue.js : Build Simple Tabs with Dynamic Components

Also you can read this post in my Notes.

Introduction:

In our previous discussions, we explored the world of dynamic components and even crafted a simple slider. However, dynamic components are not limited to just sliders; they open the door to a plethora of interactive features. In this post, we'll delve into the realm of 'Tabs.' Often, we find ourselves dealing with vast amounts of diverse data on a single page. To tackle this challenge without overwhelming our users, 'tabs' come to the rescue. They enable us to present information in manageable sections, allowing users to choose what they want to explore. While creating 'tabs' using HTML and CSS is one approach, this time, we'll leverage the power of dynamic components in Vue.js. What makes this method intriguing is not just the ability to hide inactive components but also the option to entirely remove them from your app. Join me in this exploration as we dive deeper into the world of Vue.js and build simple yet powerful tabs using dynamic components.

Step 1: Initial Project Setup

We will create a Vue js project using Quick Start instructions from Vue js official documentation.
Execute the following command to create a vite project:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.
Once executed, you will be asked some questions.

If you are unsure about an option, simply choose "No" by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

Now you should visit offered "localhost:" route, and you'll see initial project. You can remove all components and styles we will not need it.

Step 2: Create Tabs

We will create a few additional components:

• Tabs.vue - it will be our "Tabs" container;
• Tab1.vue, Tab2.vue, Tab3.vue - our tabs that will be dynamically rendered; And our project structure will look like this:

Now we will add some images into "Tab1", "Tab2", and "Tab3" for testing purposes. And the most important job is waiting for us in the Tabs.vue component.

Step 3: Configure Tabs Functionality

Okay, let's separate our moves:

• import our "Tab1", "Tab2", "Tab3" components into "Tabs";

  import Tab1 from '../components/Tab1.vue';
  import Tab2 from '../components/Tab2.vue';
  import Tab3 from '../components/Tab3.vue';

• add controls on the top of the page (we will add three buttons that will change the current tab);

<div class="controls">
     <button class="custom-btn btn-1" @click="selectTab(1)">Tab 1</button>
     <button class="custom-btn btn-1" @click="selectTab(2)">Tab 2</button>
     <button class="custom-btn btn-1" @click="selectTab(3)">Tab 3</button>
</div>

• add our dynamic component ( - is the place where our tabs will be changed dynamically and :is directive it's our control over components update);

<div class="tab-container">
     <component :is="renderedComponent"></component>
</div>

• declare two variables ("selectedTab" - a variable that stores active component id, "items" - an array that stores data about our tabs);

    data() {
      return {
        selectedTab: 1,
        items: [
            { id: 1, type: Tab1 },
            { id: 2, type: Tab2 },
            { id: 3, type: Tab3 }
        ]
      }
    }

• add a computed property that will return the current component type;

    computed: {
        renderedComponent() {
            return this.items.find(el => el.id === this.selectedTab).type;
        }
    }

• and finally create "selectTab()" method that will update our dynamical component;

    methods: {
        selectTab(selectedTab) {
            this.selectedTab = selectedTab;
        }
    }

Great, we finished our "Tabs.vue" component, and now we can launch the development server to check the result. I also added some styles to make it more user-friendly.

Continue reading...