Make components dynamic in Vue.js

Vue dynamic components enables to switch between components without routing, and even retain the state of data.

The main aim is to let users dynamically mount and unmount components and render dynamic content as per the requirement without using routers.

Using dynamic components , lot of code can be saved and provides the content in an efficient way.

Let us take an example of displaying home page, dashboard and a thank you page by navigating to its respective buttons.

Create the required components namely DashBoard.vue, Home.vue and ThankYou.vue and import it to App.vue

<template>
 <img alt="Vue logo" src="./assets/logo.png">
  <HomePage />
  <ThankYou />
  <Dashboard />

</template>

<script>
import HomePage from "./components/HomePage.vue";
import ThankYou from "./components/ThankYou.vue";
import Dashboard from "./components/Dashboard.vue";
export default {
  name: "App",
  components: {
    HomePage,
    ThankYou,
    Dashboard  
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Next, run the application to make sure it's working as expected using command:

npm run serve

Output:

Now, we can conditionally render the content using buttons and conditional statements. Create a create data property and set to any component. Vue helps us w/ dynamic component. In template, we can include vue specific html tag called component. This renders a vue component. We use 'is' attribute to tell the desired component to render out. Display HomePage component:

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

data() {
    return {
      DynamicComponent: 'HomePage'
    }
  }

Now, we can add buttons and conditions to render component on the click of a button.

<template>

  <button @click="DynamicComponent='HomePage'">Home Page</button>
  <button @click="DynamicComponent='Dashboard'">Dashboard</button>
  <button @click="DynamicComponent='ThankYou'">Thank You</button>

  <component :is="DynamicComponent"/>

</template>

Keeping data values alive as you switch

To store this data, Vue provides a template element called keep-alive. Each time, we switch the tabs, vue creates new instance of the component. In order to store the information, we need to cache it. This is called instance caching. Using keep-alive custom html element which is specific to vue, we can ensure your component state stays exactly as we left it after you switch back from one component to the other. This is really useful in form applications. Wrap the component tag in keep-alive tag. It also prevents re-rendering of component for better performance.

In the DashBoard component, add an input for name and store it in data property name

<input type="text" v-model="name">
data() {
            return {
                name: ''
            }
        }

In the App.vue component, add the keep-alive tag in order to cache the data:

<keep-alive>
    <component :is="DynamicComponent"/>
  </keep-alive>

AND THAT'S IT!!! We were successfully able to control the content in seperate component and render out using the concept of dynamic component. This is a great tool for building user interfaces and can be applied to a variety of different use cases. Please let me know your thoughts in the comments.

Thanks for reading, happy coding!!!