Vue Router is the official routing library for Vue.js applications. Even though you can go ahead and use other generic routing libraries, Vue Router deeply integrates with the ideology of Vue.js to make Single Page Applications (SPAs) easy to build.
In this article, we will be looking at how to improve the user experience in your Vue applications easily by creating transitions while routing with Vue Router.
So, why use transitions in your app?
I’ll be talking a little bit about why you might need transitions in the first place.
A website is typically made up of a collection of web pages. Movement from one webpage to the other is pretty much unavoidable, and the interaction between the website and the page movement plays a fundamental role in shaping the experience that users have on our website.
As much as possible, we should build linearity into the interaction of our websites — when a user clicks a link, they should not feel like they are starting a new experience all over again. Instead, there should be a continued experience and build up.
Imagine going from chapter one in a book to chapter five without any linearity. Even though you may understand what chapter five talks about and eventually continue enjoying the book, there will be a break in the experience. This break in experience can be softened or even removed with the use of transitions.
Vue Router makes it super easy to include transitions in your Vue app. In this article, we will be looking at how you can enable three delightful transitions in your Vue app. We will be working mainly with two components:
Transitions – Wrapper components from Vue that add transition effects to HTML or Vue elements whenever an element enters or leaves the DOM. In the <transition>
component, the name
attribute is used to add a transition class. Vue automatically gives us six classes prefixed with the value of the name
attribute. These classes are applied during the life cycle of the transition. The classes can be broken into two groups depending on what happens when the element enters and leaves the DOM:
Note: This tutorial assumes you’re familiar with setting up a Vue application with Vue Router.
App.vue
<template> <div id="app"> <ul> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact us</router-link> </ul> <transition name="slide-fade"> <router-view class="view"/> </transition> </div> </template> <script> export default {} </script> <style> .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to{ transform: translateX(10px); opacity: 0; } </style>
App.vue
<template> <div id="app"> <ul> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact us</router-link> </ul> <transition name="fade"> <router-view class="view"/> </transition> </div> </template> <script> export default {} </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .4s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
Add the animate.css
CDN link to the HTML file in your public folder like so:
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
App.vue
<template> <div id="app"> <ul> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact us</router-link> </ul> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <router-view class="view"/> </transition> </div> </template> <script> export default {} </script> <style> </style>
You can view more animation styles in the animate.css
library here: animate.style.
In this article, we have looked at the different life cycles that are provided by the Vue Transition component and how to use them, we’ve also explored how to use them with other animation libraries like animate.css
. You can read more in the documentation.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Mutative processes data with better performance than both Immer and native reducers. Let’s compare these data handling options in React.
Radix UI is quickly rising in popularity and has become an excellent go-to solution for building modern design systems and websites.
In this article, we’ll explore CSS cascade layers — and, specifically, the revert-layer
keyword — to help you refine your styling strategy.
Nushell is a modern, performant, extensible shell built with Rust. Explore its pros, cons, and how to install and get started with it.
3 Replies to "Creating transitions in your Vue app with Vue Router"
Thanks for this Emmanuel.
Is this for vue 3?
To get rid of the jerk when the two pages are transitioning I think you need to add mode=”out-in” on the transition element.