Since pages are components as well we can also use this transition functionality to apply fancy animations on pages. To make this possible we have the FlowManager. The FlowManager handles the flow between two pages. The code uses the javascript hook of the transition component.

Manual setup

Setup the seng-generator

Nobody likes typing the same code over and over again, to automatically generate code you can use the seng-generator. This generator uses templates to output code, the vue-transition-component module includes custom templates that can be used for generating transition-pages, transition-components and registrable-components. To add these templates to the seng-generator you run the following command in the root of your project:

sg init

This wil let you modify the default configuration of the seng-generator, in our case we want to modify the template path. When it comes up you should modify it to be the following:

./build-tools/template,./node_modules/vue-transition-component/template

App.vue

Modify the src/App/App.vue file so the router view is wrapped inside of a transition component this will make sure the transition out flows of pages are triggered.

...
<transition @leave="onLeave" v-bind:css="false">
    <router-view></router-view>
</transition>
...

App.js

Modify the src/App/App.js file so the onLeave method is defined and triggers the FlowManager

import { FlowManager, AbstractRegistrableComponent } from 'vue-transition-component';

export default {
  name: 'App',
  extends: AbstractRegistrableComponent,
  methods: {
    onLeave(element, done) {
      FlowManager.transitionOut.then(() => FlowManager.done()).then(done);
    },
  },
};

Routes.js

Modify the src/router/routes.js file so the HomePage has a componentId, make sure you do this for all your future pages.

import { COMPONENT_ID } from 'vue-transition-component';
import HomePage from 'page/HomePage';
import RoutePaths from 'data/enum/RoutePaths';
import RouteNames from 'data/enum/RouteNames';

export default [
  {
    path: RoutePaths.HOME,
    component: HomePage,
    name: RouteNames.HOME,
    props: { [COMPONENT_ID]: RouteNames.HOME },
  },
];

Bootstrap.js

Make sure you update the bootstrap file, since we want the App component to also include the get child functionality we need to provide a componentId. You can do this by modifying the render method.

import { COMPONENT_ID } from 'vue-transition-component';

...
// Init new vue app
const app = new Vue({
  router,
  store,
  render: createElement => createElement(App, { props: { [COMPONENT_ID]: 'app' } }),
});
...

Automated setup

For those who do not care about the steps to setup the project you can run the convert script to do this for you! Make sure you are in the root of a clean vue-skeleton project and run the following command:

node ./node_modules/vue-transition-component/tool/convert.js