Vue || How To Set Up Fade In & Fade Out Router View Transitions With Vue Router Using Vue

December 30, 2020 admin No comments

The following is a module which demonstrates how to set up fade in and fade out router view transitions with Vue using Vue Router.

Note: The examples below assumes your project is already set up and configured. For an overview on how to get started with Vue and Vue Router, visit the official documentation.

1. Router Index File

The example below is a sample router index.js file. This file sets up the routes in the project.

There are 2 routes: a ‘Home‘ page, and a ‘About‘ page.





		
		
			1. Router Index File
			
JavaScript
			
			// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 30, 2020
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Router index.js file
// ============================================================================ 
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router; // http://programmingnotes.org/
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
				
						// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 30, 2020
//    Taken From: http://programmingnotes.org/
//    File:  index.js
//    Description: Router index.js file
// ============================================================================ 
import { createRouter, createWebHistory } from 'vue-router';
 
const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
    }
];
 
const router = createRouter({
    history: createWebHistory(),
    routes
});
 
export default router; // http://programmingnotes.org/

The layout of the routes above are not important. They are declared here simply to demonstrate a project with multiple routes set up.

2. App.vue

The example below is the ‘App.vue‘ page. This is the root of the application. In this example, this is where the fade in and fade out router view transitions will take effect.

When a route is clicked, its contents is loaded inside the router-view. The example below demonstrates how to set up the fade in and fade out router view transition effect.





		
		
			2. App.vue
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 30, 2020
//    Taken From: http://programmingnotes.org/
//    File:  App.vue
//    Description: Home page that displays content via router-view
// ============================================================================
-->
<template>
    <div id="nav">
        <router-link :to="{name: 'Home'}">Home</router-link> |
        <router-link :to="{name: 'About'}">About</router-link>
    </div>
    <router-view v-slot="slotProps">
        <transition name="fade" mode="out-in">
            <component :is="slotProps.Component"></component>
        </transition>
    </router-view>
</template>

<script>
export default {
    data() {
        return {}
    }, 
    methods: {}
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style> <!-- http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 30, 2020
//    Taken From: http://programmingnotes.org/
//    File:  App.vue
//    Description: Home page that displays content via router-view
// ============================================================================
-->
<template>
    <div id="nav">
        <router-link :to="{name: 'Home'}">Home</router-link> |
        <router-link :to="{name: 'About'}">About</router-link>
    </div>
    <router-view v-slot="slotProps">
        <transition name="fade" mode="out-in">
            <component :is="slotProps.Component"></component>
        </transition>
    </router-view>
</template>
 
<script>
export default {
    data() {
        return {}
    }, 
    methods: {}
}
</script>
 
<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style> <!-- http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: JavaScript, Vue Tags: javascript, vue, vue router

Vue || How To Set Up Fade In & Fade Out Router View Transitions With Vue Router Using Vue

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories