Compound components pattern in Vue

Introduction

The compound components pattern helps you build components that work together like a team. It makes your UI easier to use and customize by grouping related parts inside one main component.

When you want to create a custom dropdown menu with separate parts like toggle button and menu list.

When building a tabs interface where each tab and its content are separate but connected.

When making a form with grouped inputs that share state and behavior.

When you want to keep your UI code clean by splitting complex components into smaller pieces that work together.

Syntax

Vue

<script setup>
import { provide, inject, ref } from 'vue'

const TabContext = Symbol('TabContext')

function useTabs() {
  const activeTab = ref(null)
  function setActiveTab(name) {
    activeTab.value = name
  }
  provide(TabContext, { activeTab, setActiveTab })
}

function useTab() {
  const context = inject(TabContext)
  if (!context) throw new Error('useTab must be used inside Tabs')
  return context
}
</script>

Use provide and inject to share state between compound components.

Each subcomponent accesses shared state via inject to stay connected.

Examples

This example shows how to use compound components to build a tabs interface with separate parts working together.

Vue

<template>
  <Tabs>
    <TabList>
      <Tab name="home">Home</Tab>
      <Tab name="profile">Profile</Tab>
    </TabList>
    <TabPanels>
      <TabPanel name="home">Welcome Home!</TabPanel>
      <TabPanel name="profile">User Profile Info</TabPanel>
    </TabPanels>
  </Tabs>
</template>

This shows how the main Tabs component shares state and the Tab component uses it to highlight the active tab.

Vue

<script setup>
import { ref, provide, inject } from 'vue'

const TabsSymbol = Symbol()

const Tabs = {
  setup(_, { slots }) {
    const active = ref(null)
    function setActive(name) {
      active.value = name
    }
    provide(TabsSymbol, { active, setActive })
    return () => slots.default()
  }
}

const Tab = {
  props: ['name'],
  setup(props, { slots }) {
    const { active, setActive } = inject(TabsSymbol)
    const isActive = () => active.value === props.name
    return () => (
      <button
        aria-selected={isActive()}
        onClick={() => setActive(props.name)}
      >
        {slots.default()}
      </button>
    )
  }
}
</script>

Sample Program

This complete example creates a tabs interface using the compound components pattern. Clicking a tab button changes the active tab and shows the matching content panel.

Vue

<script setup>
import { ref, provide, inject, defineComponent, h } from 'vue'

const TabsSymbol = Symbol('Tabs')

const Tabs = defineComponent({
  setup(_, { slots }) {
    const activeTab = ref(null)
    function setActiveTab(name) {
      activeTab.value = name
    }
    provide(TabsSymbol, { activeTab, setActiveTab })
    return () => h('div', { role: 'tablist' }, slots.default())
  }
})

const Tab = defineComponent({
  props: { name: String },
  setup(props, { slots }) {
    const context = inject(TabsSymbol)
    if (!context) throw new Error('Tab must be used inside Tabs')
    const isActive = () => context.activeTab.value === props.name
    function onClick() {
      context.setActiveTab(props.name)
    }
    return () => h('button', {
      role: 'tab',
      'aria-selected': isActive(),
      onClick
    }, slots.default())
  }
})

const TabPanel = defineComponent({
  props: { name: String },
  setup(props, { slots }) {
    const context = inject(TabsSymbol)
    if (!context) throw new Error('TabPanel must be used inside Tabs')
    const isVisible = () => context.activeTab.value === props.name
    return () => isVisible() ? h('div', { role: 'tabpanel' }, slots.default()) : null
  }
})
</script>

<template>
  <Tabs>
    <Tab name="first">First Tab</Tab>
    <Tab name="second">Second Tab</Tab>

    <TabPanel name="first">Content for the first tab.</TabPanel>
    <TabPanel name="second">Content for the second tab.</TabPanel>
  </Tabs>
</template>

Important Notes

Make sure all compound components are used inside the main parent component to access shared state.

Use semantic roles like tablist, tab, and tabpanel for accessibility.

Compound components keep your UI flexible and easy to maintain by separating concerns.

Summary

The compound components pattern groups related UI parts inside one main component.

Use provide and inject in Vue to share state between these parts.

This pattern helps build flexible, accessible, and easy-to-use components like tabs or dropdowns.

Practice

1. What is the main purpose of the compound components pattern in Vue?

easy

A. To group related UI parts inside one main component for better organization

B. To create multiple unrelated components in one file

C. To avoid using provide and inject for state sharing

D. To write components without any communication between them

Solution

1. Step 1: Understand the pattern goal

   The compound components pattern groups related UI parts to work together inside one main component.

2. Step 2: Compare options

   Only To group related UI parts inside one main component for better organization correctly describes grouping related UI parts for better organization and communication.

3. Final Answer:

   To group related UI parts inside one main component for better organization -> Option A

4. Quick Check:

   Compound components group related parts = B [OK]

Hint: Think: grouping related UI parts inside one component [OK]

Common Mistakes:

• Confusing unrelated components grouping
• Ignoring state sharing between parts
• Thinking it avoids provide/inject

2. Which Vue feature is commonly used to share state between compound components?

easy

A. provide and inject

B. props

C. v-model

D. emit events

Solution

1. Step 1: Identify state sharing methods

   Vue offers several ways to share data, but for compound components, provide and inject are designed for parent-child communication without prop drilling.

2. Step 2: Match pattern usage

   Compound components use provide/inject to share state internally, unlike props or emit which are for direct parent-child or event communication.

3. Final Answer:

   provide and inject -> Option A

4. Quick Check:

   State sharing in compound components = provide/inject [OK]

Hint: Remember: provide/inject share state inside compound components [OK]

Common Mistakes:

• Choosing props which require manual passing
• Confusing emit with state sharing
• Thinking v-model is for internal state sharing

3. Given this Vue compound component setup, what will be the rendered output?

const TabGroup = {
  setup() {
    provide('activeTab', ref('home'))
  },
  template: `
`
}

const Tab = {
  inject: ['activeTab'],
  props: ['name'],
  template: `{{ name }}`
}

// Usage:
// 
//   
//   
// 

medium

A. homeprofile

B. homeprofile

C. homeprofile

D. Error: activeTab is not reactive

Solution

1. Step 1: Understand provide/inject in Options API

   TabGroup provides 'activeTab' as ref('home'). Tab injects ['activeTab'], receiving the ref object (not auto-unwrapped in Options API).

2. Step 2: Evaluate rendering logic

   In template, activeTab (ref object) === name (string) is always false. No 'active' class applied to either button.

3. Final Answer:

   <button>home</button><button>profile</button> -> Option B

4. Quick Check:

   Options API inject ref === string = false [OK]

Hint: Options API inject returns ref object, not value [OK]

Common Mistakes:

• Assuming inject returns raw value, not ref
• Confusing which tab is active
• Thinking activeTab is not reactive

4. What is the main issue in this compound component code?

const Dropdown = {
  setup() {
    const open = ref(false)
    provide('open', open)
  },
  template: `
`
}

const DropdownToggle = {
  inject: ['open'],
  template: `Toggle`
}

medium

A. The provide key 'open' is missing

B. The template syntax is invalid

C. The 'open' variable is not returned from setup in Dropdown

D. The 'open' ref is not reactive inside DropdownToggle

Solution

1. Step 1: Check inject handling in Options API

   Injected refs via inject: ['open'] are not auto-unwrapped in Options API templates. 'open' is the ref object.

2. Step 2: Understand mutation and reactivity issue

   @click="open = !open" reassigns a boolean to the ref variable (breaks link to original ref) and lacks .value access, making the ref unusable reactively as boolean state.

3. Final Answer:

   The 'open' ref is not reactive inside DropdownToggle -> Option D

4. Quick Check:

   Options API injected ref needs .value [OK]

Hint: Use .value for injected refs in Options API templates [OK]

Common Mistakes:

• Thinking provider setup needs to return state for provide
• Template syntax looks invalid
• Provide key seems missing

5. You want to build a compound Tabs component where clicking a tab updates the active tab and content changes accordingly. Which approach correctly implements this pattern in Vue 3?

hard

A. Use local state in each Tab component without sharing activeTab

B. Pass activeTab as prop to each Tab and emit events to Tabs to update state

C. Use provide to share activeTab ref in Tabs, inject in TabList and TabPanels, update activeTab on Tab click

D. Use global event bus to communicate active tab changes between components

Solution

1. Step 1: Identify compound components pattern usage

   The pattern uses provide/inject to share state like activeTab across nested components without prop drilling.

2. Step 2: Evaluate options for state management

   Use provide to share activeTab ref in Tabs, inject in TabList and TabPanels, update activeTab on Tab click correctly uses provide to share activeTab ref and inject in child components, updating activeTab on tab click to reflect changes.

3. Final Answer:

   Use provide to share activeTab ref in Tabs, inject in TabList and TabPanels, update activeTab on Tab click -> Option C

4. Quick Check:

   Compound components share state via provide/inject = D [OK]

Hint: Use provide/inject to share and update active tab state [OK]

Common Mistakes:

• Using props and events causing complex prop drilling
• Using global event bus which is not recommended
• Keeping state local in each tab causing no sync