Guide to Dynamic Component Usage in Vue.js and Nuxt

You can read this post in my web notes

We will continue to deal with the peculiarities of working with Vue.js and in this post, we will talk about dynamic components. Dynamic components in Vue.js refer to the ability to dynamically render different components based on certain conditions or user interactions. It allows you to switch between different components dynamically without needing to manually write conditional rendering logic. With dynamic components, you can define a placeholder component and dynamically replace it with different components at runtime. This provides flexibility and reusability in your Vue.js applications, as you can easily swap out components based on specific requirements or user actions. Let's dive deeper and consider dynamic components in an example:
First of all, we will use "Quick Start" instructions from the official Vue.js website and create a starting project. Clean it a little bit and remove unnecessary files: styles, components, etc...
Great, now we will create two different components each will contain an image, here is an example:

<template>
    <div class="image-container">
        <img src="https://cdn.pixabay.com/photo/2023/12/09/14/43/iceland-8439504_1280.jpg" />
    </div>
</template>

<script>
export default {
    name: "FirstImage"
}
</script>

Next, in our App.vue file we will add a container as a placeholder for our component, and inside that container set tag with :is directive. :is a directive receive variable that will contain the name of the component that needs to be shown. Also, we will add a simple button with a click event that will update our variable in :is directive. Stop talking let's check the code:

<template>
  <main class="container">
    <div class="button-container">
      <button @click="componentToRender === 0 ? componentToRender = 1 : componentToRender = 0">
        Press the button
      </button>
    </div>
    <div class="component-container">
      <component :is="imageToShow" />
    </div>
  </main>
</template>

<script>
import FirstImage from './components/FirstImage.vue';
import SecondImage from './components/SecondImage.vue';
export default {
  name: "App",

  data() {
    return {
      componentToRender: 0,
      componentsList: [
        {
          id: 0,
          name: FirstImage
        },
        {
          id: 1,
          name: SecondImage
        }
      ]
    }
  },

  computed: {
    imageToShow() {
      return this.componentsList.find(el => el.id === this.componentToRender).name;
    }
  }
}
</script>

And the result will be something like this:

Every time we push the button our "component" will be updated and the image will be changed.
"component" tag behavior is the same as any imported component template. It means that we can send props to the child component. Let's send some text as an example:

<div class="component-container">
    <component 
        :is="imageToShow"
        :title="'Iceland'" />
</div>

And receive this title in the child component:

<template>
    <div class="image-container">
        <p class="image-title">{{ title }}</p>
        <img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/mountains-190055_1280.jpg" />
    </div>
</template>

<script>
export default {
    name: "SecondImage",
    props: ['title']
}
</script>

Our result will be:

Vue.js dynamic components allow developers to easily change the user interface (UI) based on how users interact with it. This means that you can swap images, create interactive tabs or modals, and make other UI changes without much effort. This flexibility makes it easier to write code, reuse components, and create great user experiences in Vue.js projects. So, keep exploring and using dynamic components to make the most out of Vue.js and build interactive applications!

Check my other posts in my web notes