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

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'

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

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

Hint

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

Practice

1. What does the is attribute do in Vue's <component> tag?

easy

A. It binds data to the component's props.

B. It sets the CSS style of the component.

C. It tells Vue which component to render dynamically.

D. It triggers a lifecycle hook in the component.

Solution

1. Step 1: Understand the role of <component> tag

   The <component> tag in Vue is a special tag used to render different components dynamically.

2. Step 2: Identify the purpose of the is attribute

   The is attribute specifies which component to render by binding to a variable or string representing the component name.

3. Final Answer:

   It tells Vue which component to render dynamically. -> Option C

4. Quick Check:

   Dynamic component selection = is attribute [OK]

Hint: Remember: picks component x [OK]

Common Mistakes:

• Thinking is sets styles
• Confusing is with prop binding
• Assuming is triggers lifecycle hooks

2. Which of the following is the correct syntax to use a dynamic component named MyButton in Vue?

easy

A.

B.

C.

D.

Solution

1. Step 1: Understand binding syntax for dynamic components

   The is attribute must be bound with : to a variable or string. To specify a component by name as a string, use quotes inside the binding.

2. Step 2: Check each option's syntax

   uses is="MyButton" without binding, so Vue treats it as a literal tag, not a component name. binds MyButton as a variable, but if MyButton is not defined in the script, it fails. correctly binds is to the string 'MyButton'. uses is='MyButton' without binding, which is invalid for dynamic components.

3. Final Answer:

   <component :is='"MyButton"'></component> -> Option A

4. Quick Check:

   Use :is with quotes for string component names [OK]

Hint: Use :is with quotes for string names, no quotes without : [OK]

Common Mistakes:

• Omitting the colon for binding
• Using quotes without binding
• Binding to undefined variables

3. Given the Vue template:

<template>
  <component :is="currentView" />
</template>

<script setup>
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const currentView = ref('HomeView')
</script>

What will be rendered initially?

medium

A. The HomeView component

B. The AboutView component

C. A runtime error because currentView is a string

D. An empty component (nothing rendered)

Solution

1. Step 1: Analyze the value of currentView

   The variable currentView is a ref holding the string 'HomeView'.

2. Step 2: Understand how Vue resolves dynamic components

   Vue expects the is attribute to be a component object or a registered component name. Here, 'HomeView' is a string but the component is imported as HomeView object, not registered globally or locally by that string name.

3. Step 3: Result of passing string without registration

   Since 'HomeView' is not registered as a component name, Vue renders nothing (empty component) without error.

4. Final Answer:

   An empty component (nothing rendered) -> Option D

5. Quick Check:

   Unregistered string name = empty render [OK]

Hint: Dynamic component string must be registered or component object [OK]

Common Mistakes:

• Assuming string name auto-resolves to imported component
• Expecting runtime error for string value
• Confusing ref value with component object

4. Identify the error in this Vue code snippet:

<template>
  <component :is="currentComp" />
</template>

<script setup>
import Foo from './Foo.vue'

const currentComp = Foo
</script>

medium

A. No error; this code works correctly

B. The currentComp variable should be a string, not a component object

C. Missing quotes around component name in is attribute

D. The component tag must be self-closing with a closing slash

Solution

1. Step 1: Check the type of currentComp

   currentComp is assigned the imported component object Foo, which is valid for dynamic components.

2. Step 2: Verify the component tag usage

   The <component> tag uses :is="currentComp" correctly, and self-closing syntax is allowed in Vue templates.

3. Final Answer:

   No error; this code works correctly -> Option A

4. Quick Check:

   Passing component object to :is works fine [OK]

Hint: Pass component objects directly to :is for dynamic rendering [OK]

Common Mistakes:

• Thinking :is must always be a string
• Confusing self-closing tags as errors
• Expecting quotes around component objects

5. You want to switch between three components HomeView, ProfileView, and SettingsView dynamically based on a button click. Which approach correctly implements this using Vue's dynamic components?

hard

A. <template>
<component :is="currentView" />
<button @click="currentView = 'HomeView'">Home</button>
<button @click="currentView = 'ProfileView'">Profile</button>
<button @click="currentView = 'SettingsView'">Settings</button>
</template>

<script setup>
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'
import SettingsView from './SettingsView.vue'

const currentView = ref(HomeView)
</script>

B. <template>
<component :is="currentView" />
<button @click="currentView = HomeView">Home</button>
<button @click="currentView = ProfileView">Profile</button>
<button @click="currentView = SettingsView">Settings</button>
</template>

<script setup>
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'
import SettingsView from './SettingsView.vue'

const currentView = ref(HomeView)
</script>

C. <template>
<component :is="currentView" />
<button @click="currentView = 'HomeView'">Home</button>
<button @click="currentView = 'ProfileView'">Profile</button>
<button @click="currentView = 'SettingsView'">Settings</button>
</template>

<script setup>
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'
import SettingsView from './SettingsView.vue'

const currentView = ref('HomeView')
</script>

D. <template>
<component :is="currentView" />
<button @click="currentView = HomeView">Home</button>
<button @click="currentView = ProfileView">Profile</button>
<button @click="currentView = SettingsView">Settings</button>
</template>

<script setup>
import HomeView from './HomeView.vue'
import ProfileView from './ProfileView.vue'
import SettingsView from './SettingsView.vue'

const currentView = ref('HomeView')
</script>

Solution

1. Step 1: Understand how to switch components dynamically

   To switch components dynamically, currentView must hold the component object, not a string, unless the string matches a registered component name.

2. Step 2: Analyze each option's approach

   <template>
     <component :is="currentView" />
     <button @click="currentView = 'HomeView'">Home</button>
     <button @click="currentView = 'ProfileView'">Profile</button>
     <button @click="currentView = 'SettingsView'">Settings</button>
   </template>
   
   <script setup>
   import HomeView from './HomeView.vue'
   import ProfileView from './ProfileView.vue'
   import SettingsView from './SettingsView.vue'
   
   const currentView = ref(HomeView)
   </script>

   initializes currentView with a component object but sets it to strings on button clicks, causing mismatch.

   <template>
     <component :is="currentView" />
     <button @click="currentView = HomeView">Home</button>
     <button @click="currentView = ProfileView">Profile</button>
     <button @click="currentView = SettingsView">Settings</button>
   </template>
   
   <script setup>
   import HomeView from './HomeView.vue'
   import ProfileView from './ProfileView.vue'
   import SettingsView from './SettingsView.vue'
   
   const currentView = ref(HomeView)
   </script>

   initializes and updates currentView with component objects consistently, which is correct.

   <template>
     <component :is="currentView" />
     <button @click="currentView = 'HomeView'">Home</button>
     <button @click="currentView = 'ProfileView'">Profile</button>
     <button @click="currentView = 'SettingsView'">Settings</button>
   </template>
   
   <script setup>
   import HomeView from './HomeView.vue'
   import ProfileView from './ProfileView.vue'
   import SettingsView from './SettingsView.vue'
   
   const currentView = ref('HomeView')
   </script>

   uses strings only, but these strings are not registered component names, so Vue won't render them.

   <template>
     <component :is="currentView" />
     <button @click="currentView = HomeView">Home</button>
     <button @click="currentView = ProfileView">Profile</button>
     <button @click="currentView = SettingsView">Settings</button>
   </template>
   
   <script setup>
   import HomeView from './HomeView.vue'
   import ProfileView from './ProfileView.vue'
   import SettingsView from './SettingsView.vue'
   
   const currentView = ref('HomeView')
   </script>

   mixes component objects and strings inconsistently, causing errors.

3. Final Answer:

   Option B correctly uses component objects for dynamic switching. -> Option B

4. Quick Check:

   Use component objects consistently for :is switching [OK]

Hint: Keep :is value consistent: all component objects or all registered strings [OK]

Common Mistakes:

• Mixing strings and component objects in :is
• Using unregistered string names
• Initializing with object but switching to strings