Vue.js: Using Vue Router Page Transitions

So you’re currently building a single page application with Vue.js?

High Five Buddy ✋, you surely know how to have fun! And you know what, let’s even have some more fun together. In this article, I will show you how to convert your awesome Vue.js application into a super super awesome Vue.js application.

You’re thinking how this can be done? vue-page-transition is the keyword!

Vue Page Transition is a lightweight Vue.js Plugin, which extends your application with a collection of awesome routing transitions.

Demo | GitHub

Demo: https://orlandster.github.io/vue-page-transition/#/

Convinced? So let’s jump into it. Let’s see how to use the Plugin in 3 simple steps.

1. Install Vue Page Transition

As a first step, we’ll need to install the plugin from the npm registry:

yarn add vue-page-transition
// or with npm
npm i vue-page-transition

2. Register Vue Page Transition

The second step is it to register the installed Plugin:

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

3. Wrap the router-view

The third and final step is it to wrap the router-view component with the vue-page-transition component:

<vue-page-transition name="fade-in-right">
  <router-view/>
</vue-page-transition>

Et voilà, there it is! Our working page transition. Too easy? Let’s check out some more features.

Transitions

There is a whole collection of transitions. (more to be added in the future) Simply browse through the demo / docs in order to see all the available options.

Global Transitions
A global transition will be applied to all the routes in your application. You can easily set up a global transition by passing a value to the name attribute on the vue-page-transition element. (as we’ve done it previously)

Local Transitions
A local transition is there to overwrite the global configuration for a single route. This allows you to have multiple transitions in the same application. Local transitions can be easily created by passing the transtion prop to your route’s meta field:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'zoom' },
    },
  ]
})

Well done, now you’re good to go! If you like the way it spices up your application don’t forget to Star the repo on GitHub. Stars keep me motivated and are highly appreciated. Thank You!

If you think there’s a Feature missing you’re more then welcome to open a Feature Request.

Thanks for reading and see you next time!