Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.
Vue.js Dynamic Components allows the users to switch over the components without updating the route of the Vue.js application itself. It also keeps the data in its current state. It is useful when the user is in a tabbed interface.
Vue.js Dynamic Components Attribute:
- :is: This field accepts a name string for the registered component or an actual component.
Syntax: In the component section, add the :is field and provide either the variable name or the component name as follows:
<component :is="currentComponent" />
Example: In the following example, we have two components and we have imported them into the App.vue file. Now we can toggle between the components without reloading the page.
Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.
npm init vue@latest
Enter the project name and preset the project as follows:
Project Structure: After successful installation, the following project structure will be formed.
Project Structure
Step 2: Create a folder called /components under the /src folder and create two files under it, card1.vue and card2.vue respectively. The structure should be as follows:
Step 3: In the card1.vue, we will add some data related to data structures and algorithms as follows:
card1.vue
<script></script> <template> <h3>Data Structures and Algorithms</h3> <b>Data Structures</b> <ul style="list-style-type: none"> <li>Arrays</li> <li>Set</li> <li>Priority Queue</li> </ul> <b>Algorithms</b> <ul style="list-style-type: none"> <li>Searching</li> <li>Sorting</li> <li>Greedy</li> </ul> </template> <script> export default { name: 'App', components: {}, }; </script> |
Step 4: In the card2.vue, we will add some data related to programming languages as follows:
card2.vue
<template> <h3>Programming Languages</h3> <b>Object Oriented Programming Language</b> <ul style="list-style: none"> <li>Java</li> <li>C++</li> <li>Python</li> </ul> <b>Procedure Oriented Programming Language</b> <ul style="list-style: none"> <li>COBOL</li> <li>FORTRAN</li> <li>C</li> </ul> </template> <script> export default { name: "App", components: {}, }; </script> |
Step 5: In the script section of the App.vue file, register the components and then create a data variable called currentComponent to store the name of the variable. Create a toggle function to toggle the name of the variable with respect to imported components.
App.vue
<script> import Card1 from "./components/card1.vue"; import Card2 from "./components/card2.vue"; export default { data() { return { currentComponent: "Card1", }; }, methods: { toggle() { this.currentComponent = this.currentComponent === "Card1" ? "Card2" : "Card1"; }, }, components: { Card1, Card2, }, }; </script> |
Step 6: In the template section of the App.vue file, add the component element and toggle with a button click as follows:
App.vue
<template> <center> <h1 style="text-align: center; color: green"> neveropen </h1> <strong> Vue.js Dynamic Components </strong> <br /> </center> <center> <component :is="currentComponent" /> <button @click="toggle">Toggle</button> </center> </template> |
Step 7: Run the project using the following command and see the output.
npm run dev
Output: On successfully building the project, open http://localhost:3000, and the result will be as follows.
Reference: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components
