Tutorial

More Advanced Routing with Vue: Transitions Using Vue Router

Published on March 19, 2020
Default avatar

By Jim Toth

More Advanced Routing with Vue: Transitions Using Vue Router

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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
main.js
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')
App.vue
<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>
components/Swamp.vue
<template>
  <div>Welcome to the Swamp!</div>
</template>

<script>
export default { name: 'Swamp' }
</script>
components/Gator.vue
<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.

App.vue
<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:

Script: App.vue
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:

Style: App.vue
.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):

components/Gator.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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Jim Toth

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel