More Advanced Routing with Vue: Transitions Using Vue Router

Last time we covered advanced Vue Router topics we discussed Navigation Guards and Redirects. This time we’ll be tackling how to implement Vue Router Transitions.

We’ve already covered Vue Transitions in Understanding Vue.js Transitions, so we’ll use that as a starting point. Combining Vue Router with transitions will allow us to customize the user’s experience while they navigate throughout our app with custom styling or animations. This is important with apps that grow large with many complex routes.

Setup

Since this is another post about advanced Vue Router techniques, we’ll assume you’re already familiar with the basic setup. However, let’s define a starting point that we’ll use for the rest of the post:

# Yarn
$ yarn add vue-router

# or npm
$ npm install vue-router --save

import Vue from 'vue';
import VueRouter from 'vue-router';

import App from './App';
import Swamp from './components/Swamp';
import Gator from './components/Gator';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator }
  ]
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

<template>
  <div id="app">
    <div class="nav">
      <router-link to="/swamp">Swamp</router-link> |
      <router-link to="/gator">Gator</router-link>
    </div>
    <hr />
    <div class="router-view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default { name: 'App' }
</script>

<template>
  <div>Welcome to the Swamp!</div>
</template>

<script>
export default { name: 'Swamp' }
</script>

<template>
  <div>Howdy, Gator!</div>
</template>

<script>
export default { name: 'Gator' }
</script>

Router Transitions

The Vue Router allows us to wrap our <router-view> component with the <transition> component. This enables transitions when navigating both to and from our route components.

<template>
  <div id="app">
    <div class="nav">
      <router-link to="/swamp">Swamp</router-link> |
      <router-link to="/gator">Gator</router-link>
    </div>
    <hr />
    <div class="router-view">
      <transition name="slither">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default { name: 'App' }
</script>

<style>
.slither-enter-active, .slither-leave-active {
  transition: transform 1s;
}

.slither-enter, .slither-leave-to {
  transform: translateX(-100%);
}

.slither-enter-to, .slither-leave {
  transform: translateX(0);
}
</style>

Now you’ll notice the Gator and Swamp components slither in and out from the left when navigating!

Dynamic Transitions

We can also define router transitions dynamically. This would allow us to add a transition only when navigating away from /swamp:

export default {
  name: 'App',
  data () {
    return { transitionName: null }
  },
  watch: {
    '$route' (to, from) {
      if (from.path === '/swamp') {
        this.transitionName = 'drain';
      } else {
        this.transitionName = 'slither';
      }
    }
  }
}

Now let’s define the drain transition:

.slither-enter-active, .slither-leave-active {
  transition: transform 1s;
}

.slither-enter, .slither-leave-to {
  transform: translateX(-100%);
}

.slither-enter-to, .slither-leave {
  transform: translateX(0);
}

.drain-enter-active, .drain-leave-active {
  transition: transform 1s;
}

.drain-enter, .drain-leave-to {
  transform: translateY(100%);
}

.drain-enter-to, .drain-leave {
  transform: translateY(0);
}

Now we’ll see that only when leaving Swamp we’ll see it drain away 🤓.

Per-route transitions

We could also apply transitions on a per-route basis. We can accomplish this by wrapping a route component with <transition>. Let’s say we modified Gator as follows (making sure to remove the original <transition> in App.vue):

<template>
  <transition name="slither">
    <div>Howdy, Gator!</div>
  </transition>
</template>

<script>
export default { name: 'Gator' }
</script>

Now, only when navigating to /gator will we see our slither transition in action.

Wrapping Up

Vue Router transitions are great for adding next-level user experiences. Not only can we make our apps look cool, but transitions can also aid in helping the user navigate a complex router setup. If we were implementing a wizard or a book, we could have components transition to the left or right as if the user were turning pages. This helps the user remember where they are in your app!