Dynamic components with is attribute in Vue - Step-by-Step Execution

Concept Flow - Dynamic components with is attribute

Start

↓

Define component names

↓

Set dynamic component name in data

↓

Vue renders <component :is="currentComponent">

↓

Component matching currentComponent is mounted

↓

User triggers change

↓

Update currentComponent value

↓

Vue re-renders new component

↓

Repeat or End

Vue uses the 'is' attribute to switch which component to render dynamically based on a variable, updating the view when the variable changes.

Execution Sample

Vue

const app = Vue.createApp({
  data() {
    return { currentComponent: 'comp-a' };
  }
});
app.component('comp-a', { template: '<p>Component A</p>' });
app.component('comp-b', { template: '<p>Component B</p>' });

This code sets up two components and a variable to choose which one to show dynamically.

Execution Table

Step	Action	currentComponent	Rendered Component	Output
1	Initialize app	comp-a	comp-a	<p>Component A</p>
2	Render dynamic component	comp-a	comp-a	<p>Component A</p>
3	User changes currentComponent to 'comp-b'	comp-b	comp-b	<p>Component B</p>
4	Re-render dynamic component	comp-b	comp-b	<p>Component B</p>
5	User changes currentComponent to 'comp-a'	comp-a	comp-a	<p>Component A</p>
6	Re-render dynamic component	comp-a	comp-a	<p>Component A</p>
7	No more changes	comp-a	comp-a	<p>Component A</p>

💡 Execution stops when no further changes to currentComponent occur.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
currentComponent	comp-a	comp-b	comp-a	comp-a

Key Moments - 3 Insights

Why does changing currentComponent update the displayed component?

Because Vue watches the currentComponent variable used in the 'is' attribute and re-renders the matching component when it changes, as shown in steps 3 and 4.

What happens if currentComponent is set to a component name that is not registered?

Vue will render nothing or an empty placeholder because it cannot find a matching component, so no output appears. This is not shown in the table but is important to know.

Does Vue keep the state of the old component when switching dynamically?

By default, Vue destroys the old component and creates a new one, so state is reset. To preserve state, you would use <keep-alive>, which is not covered here.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of currentComponent at Step 4?

A comp-a

B comp-c

C comp-b

D undefined

💡 Hint

Check the 'currentComponent' column at Step 4 in the execution_table.

At which step does the component output change from '<p>Component A</p>' to '<p>Component B</p>'?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Output' column in the execution_table and find when it switches to Component B.

If currentComponent was never changed after initialization, what would the output be at Step 7?

A <p>Component A</p>

B No output

C <p>Component B</p>

D Error

💡 Hint

Refer to the variable_tracker and execution_table for the initial and final value of currentComponent.

Concept Snapshot

Vue dynamic components use the <component :is="componentName"> syntax.
The 'is' attribute value is a variable holding the component name.
Changing this variable switches which component Vue renders.
Vue destroys the old component and mounts the new one.
Useful for swapping views without manual DOM changes.

Full Transcript

This visual execution shows how Vue dynamically renders components using the 'is' attribute. Initially, the variable currentComponent is set to 'comp-a', so Vue renders Component A. When currentComponent changes to 'comp-b', Vue destroys Component A and renders Component B instead. Changing currentComponent back to 'comp-a' swaps the view again. This dynamic switching happens automatically because Vue tracks the variable used in the 'is' attribute and updates the DOM accordingly. Beginners often wonder why changing the variable updates the view; it's because Vue reacts to data changes and re-renders the matching component. If the variable points to an unregistered component, Vue renders nothing. Also, by default, component state is lost when switching unless special wrappers like keep-alive are used. This trace helps learners see each step of the variable change and component rendering clearly.

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