Open In App

Vue.js Transitioning between the Components

Improve
Improve
Like Article
Like
Save
Share
Report

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 Transitioning between the Components allows for transition between the components using the dynamic components. We can transform between the different components with the component and the transition component.

Vue.js Transitioning between the Components Attributes: 

  • :is: This stores the component name that we want to display.

Syntax: We can transform between the components using the following syntax:

<transition name="translate" mode="out-in">
  <component :is="activeComponent"></component>
</transition>

Example: In the following example, we have two components created and we transform between them using a radio input button. Then we wrap the component inside the transition component and apply the animation.

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 as follows:

card1.vue




<template>
  <div>
    <b>Data Structures</b>
    <ul style="list-style-type: none">
      <li>Arrays</li>
      <li>Set</li>
      <li>Priority Queue</li>
    </ul>
  </div>
</template>
  
<script>
  export default {
    name: "App",
    components: {},
  };
</script>


Step 4: In the card2.vue, we will add some data related to algorithms as follows:

card2.vue




<template>
  <div>
    <b>Algorithms</b>
    <ul style="list-style-type: none">
      <li>Searching</li>
      <li>Sorting</li>
      <li>Greedy</li>
    </ul>
  </div>
</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 activeComponent to store the name of the variable. This will also act as a v-model for the radio buttons.

App.vue




<script>
  import card1 from "./components/card1.vue";
  import card2 from "./components/card2.vue";
  
  export default {
    data() {
      return {
        activeComponent: "card1",
      };
    },
    components: {
      card1,
      card2,
    },
  };
</script>


Step 6: In the template section of the App.vue file,  add the radio input, transition element, and inside it the component element. Also, apply the styles for the transition.

App.vue




<template>
  <center>
    <h1 style="text-align: center;
        color: green">
            GeeksforGeeks
    </h1>
    <strong>
        Vue.js Transitioning between the Components
    </strong>
    <br />
  </center>
  <center>
    <label>
      <input type="radio" 
               v-model="activeComponent" 
               value="card1" /> Card 1
    </label>
    <label>
      <input type="radio" 
               v-model="activeComponent"
               value="card2" /> Card 2
    </label>
    <transition name="translate" mode="out-in">
      <component :is="activeComponent"></component>
    </transition>
    <br />
  </center>
</template>
  
<style>
  .translate-enter-active,
  .translate-leave-active {
    transition: all 0.5s ease;
  }
  
  .translate-enter-from,
  .translate-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>


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/built-ins/transition.html#transition-between-components



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads