Compound components pattern in Vue - Mini Project: Build & Apply

Build a Tabbed Interface Using Compound Components Pattern in Vue

📖 Scenario: You are creating a simple tabbed interface for a website. Users can click on different tabs to see different content sections. To keep the code clean and reusable, you will use the compound components pattern in Vue.

🎯 Goal: Build a tabbed interface using Vue's Composition API and the compound components pattern. The interface will have a parent Tabs component and child components TabList, Tab, and TabPanels that work together to show the correct content when a tab is selected.

📋 What You'll Learn

Create a Tabs component to manage the active tab state.

Create a TabList component to hold the clickable tabs.

Create multiple Tab components that update the active tab when clicked.

Create a TabPanels component that shows content for the active tab only.

Use Vue 3 Composition API with <script setup> and ref or reactive.

Use the compound components pattern to share state between components.

Ensure accessibility by using proper roles and keyboard navigation support.

💡 Why This Matters

🌍 Real World

Tabbed interfaces are common in websites and apps to organize content in a small space. Using compound components helps keep code clean and reusable.

💼 Career

Understanding compound components and state sharing is important for building scalable Vue applications and reusable UI libraries.

1

Setup the Tabs state with Vue's ref

Create a Vue component called Tabs with a ref named activeTab initialized to 0. This will track the currently selected tab index.

Vue

import { ref } from 'vue'

// Your code here

Hint

Use ref(0) to create a reactive variable activeTab starting at 0.

2

Create a TabList component and a Tab component

Inside the Tabs component, create a TabList component that renders a <div role="tablist">. Inside it, create three Tab components. Each Tab should be a <button role="tab"> with text labels: "Home", "Profile", and "Settings". The Tab components should emit a click event to update activeTab to their index (0, 1, 2).

Vue

import { ref } from 'vue'

const activeTab = ref(0)

// Add TabList and Tab components here

Hint

Use defineComponent to create Tab and TabList. Use role="tablist" on the container and role="tab" on buttons. Emit an event to update activeTab.

3

Create TabPanels to show content for the active tab

Create a TabPanels component inside Tabs. It should render three <section role="tabpanel"> elements with content: "Welcome to Home", "User Profile Info", and "Application Settings". Only the panel matching activeTab should be visible; others should have hidden attribute.

Vue

import { ref, defineComponent, h } from 'vue'

const activeTab = ref(0)

const Tab = defineComponent({
  props: ['index', 'label'],
  emits: ['update:activeTab'],
  setup(props, { emit }) {
    const selectTab = () => emit('update:activeTab', props.index)
    return () => h('button', {
      role: 'tab',
      'aria-selected': activeTab.value === props.index,
      tabindex: activeTab.value === props.index ? 0 : -1,
      onClick: selectTab
    }, props.label)
  }
})

const TabList = defineComponent({
  setup() {
    return () => h('div', { role: 'tablist' }, [
      h(Tab, { index: 0, label: 'Home', onUpdateActiveTab: val => activeTab.value = val }),
      h(Tab, { index: 1, label: 'Profile', onUpdateActiveTab: val => activeTab.value = val }),
      h(Tab, { index: 2, label: 'Settings', onUpdateActiveTab: val => activeTab.value = val })
    ])
  }
})

// Add TabPanels component here

Hint

Use hidden attribute to hide panels that are not active. Use role="tabpanel" for accessibility.

4

Combine all components inside Tabs and export

Inside the Tabs component, render TabList and TabPanels together. Export Tabs as the default component. This completes the compound components pattern for the tab interface.

Vue

import { ref, defineComponent, h } from 'vue'

const activeTab = ref(0)

const Tab = defineComponent({
  props: ['index', 'label'],
  emits: ['update:activeTab'],
  setup(props, { emit }) {
    const selectTab = () => emit('update:activeTab', props.index)
    return () => h('button', {
      role: 'tab',
      'aria-selected': activeTab.value === props.index,
      tabindex: activeTab.value === props.index ? 0 : -1,
      onClick: selectTab
    }, props.label)
  }
})

const TabList = defineComponent({
  setup() {
    return () => h('div', { role: 'tablist' }, [
      h(Tab, { index: 0, label: 'Home', onUpdateActiveTab: val => activeTab.value = val }),
      h(Tab, { index: 1, label: 'Profile', onUpdateActiveTab: val => activeTab.value = val }),
      h(Tab, { index: 2, label: 'Settings', onUpdateActiveTab: val => activeTab.value = val })
    ])
  }
})

const TabPanels = defineComponent({
  setup() {
    return () => h('div', {}, [
      h('section', { role: 'tabpanel', hidden: activeTab.value !== 0 }, 'Welcome to Home'),
      h('section', { role: 'tabpanel', hidden: activeTab.value !== 1 }, 'User Profile Info'),
      h('section', { role: 'tabpanel', hidden: activeTab.value !== 2 }, 'Application Settings')
    ])
  }
})

// Render TabList and TabPanels inside Tabs and export Tabs
// Your code here

Hint

Render TabList and TabPanels inside a div in the Tabs component. Export Tabs as default.