Dynamic components with is attribute in Vue - Mini Project: Build & Apply

Dynamic Components with is Attribute in Vue

📖 Scenario: You are building a simple Vue app that shows different greetings depending on the selected language. You want to switch the greeting component dynamically based on user choice.

🎯 Goal: Create a Vue app that uses the is attribute to dynamically render one of three greeting components: EnglishGreeting, SpanishGreeting, or FrenchGreeting. The user can select the language from a dropdown, and the correct greeting component will show.

📋 What You'll Learn

Create three simple greeting components: EnglishGreeting, SpanishGreeting, FrenchGreeting

Create a reactive variable called currentLanguage to hold the selected language

Use the is attribute on <component> to render the correct greeting component dynamically

Add a dropdown <select> to change currentLanguage between 'EnglishGreeting', 'SpanishGreeting', and 'FrenchGreeting'

💡 Why This Matters

🌍 Real World

Dynamic components let you build flexible user interfaces that change based on user input or app state, like language selectors, tab views, or content previews.

💼 Career

Understanding dynamic components is key for Vue developers to create reusable and interactive UI parts efficiently.

1

Create greeting components

Create three Vue components named EnglishGreeting, SpanishGreeting, and FrenchGreeting. Each should return a simple <p> with the text 'Hello!', '¡Hola!', and 'Bonjour!' respectively.

Vue

  
  



// Define EnglishGreeting component
// Define SpanishGreeting component
// Define FrenchGreeting component

Need a hint?

Use defineComponent and return a p element with the greeting text inside each component.

2

Add reactive currentLanguage variable

Inside the <script setup>, create a reactive variable called currentLanguage using ref and set its initial value to 'EnglishGreeting'.

Vue

  
  



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

const EnglishGreeting = defineComponent({
  name: 'EnglishGreeting',
  setup() {
    return () => h('p', 'Hello!')
  }
})

const SpanishGreeting = defineComponent({
  name: 'SpanishGreeting',
  setup() {
    return () => h('p', '¡Hola!')
  }
})

const FrenchGreeting = defineComponent({
  name: 'FrenchGreeting',
  setup() {
    return () => h('p', 'Bonjour!')
  }
})

// Create currentLanguage ref with initial value 'EnglishGreeting'

Need a hint?

Use ref from Vue to create a reactive variable called currentLanguage and set it to 'EnglishGreeting'.

3

Use is attribute for dynamic component

In the <template>, add a <component> tag with the :is attribute bound to currentLanguage. Also, register the three greeting components in an object called components inside <script setup>.

Vue

  
    
  



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

const EnglishGreeting = defineComponent({
  name: 'EnglishGreeting',
  setup() {
    return () => h('p', 'Hello!')
  }
})

const SpanishGreeting = defineComponent({
  name: 'SpanishGreeting',
  setup() {
    return () => h('p', '¡Hola!')
  }
})

const FrenchGreeting = defineComponent({
  name: 'FrenchGreeting',
  setup() {
    return () => h('p', 'Bonjour!')
  }
})

import { ref } from 'vue'
const currentLanguage = ref('EnglishGreeting')

// Create components object with EnglishGreeting, SpanishGreeting, FrenchGreeting

Need a hint?

Use <component :is="components[currentLanguage]" /> in the template and create a components object mapping the component names.

4

Add dropdown to change currentLanguage

Add a <select> element in the template with v-model bound to currentLanguage. Add three <option> elements with values 'EnglishGreeting', 'SpanishGreeting', and 'FrenchGreeting' and labels 'English', 'Spanish', and 'French'.

Vue

  
    
    
  



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

const EnglishGreeting = defineComponent({
  name: 'EnglishGreeting',
  setup() {
    return () => h('p', 'Hello!')
  }
})

const SpanishGreeting = defineComponent({
  name: 'SpanishGreeting',
  setup() {
    return () => h('p', '¡Hola!')
  }
})

const FrenchGreeting = defineComponent({
  name: 'FrenchGreeting',
  setup() {
    return () => h('p', 'Bonjour!')
  }
})

import { ref } from 'vue'
const currentLanguage = ref('EnglishGreeting')

const components = {
  EnglishGreeting,
  SpanishGreeting,
  FrenchGreeting
}

// Your code here

Need a hint?

Use a <select> with v-model="currentLanguage" and add options for each greeting component.