Vue.js 2 Cookbook

How to do it…

In this recipe, we will build a website for a restaurant for ghosts. It won't be much different from the website of a regular restaurant, except for the requirements that the pages must fade instead of appearing instantly.

Let's put down some HTML layout, shall we:

<div id="app">  <h1>Ghost's Restaurant</h1>  <ul>    <li><router-link to="/">Home</router-link></li>    <li><router-link to="/menu">Menu</router-link></li>    </ul>  <transition mode="out-in">  <router-view></router-view>  </transition></div>

Note how we wrapped the main router display port with a transition tag. The mode out-in is set because we want the animation for the disappearing component to finish before the other component appears. If we hadn't we set that, the two ...