Fix webpack dependency

examples/custom-routes/layouts/app.vue

@@ -95,4 +95,11 @@ a, a:hover
   text-decoration: none;
   color: #41B883;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
 </style>

examples/custom-routes/nuxt.config.js

@@ -10,5 +10,6 @@ module.exports = {
       '/posts/:slug/:name': [{slug: 'foo', name: 'b'}, {slug: 'bar', name: 'a'}],
       '/projects/:slug': [{slug: 'toto'}, {slug: 'titi'}, {slug: 'tutu'}]
     }
-  }
+  },
+  transition: 'fade'
 }

examples/custom-routes/pages/team/about.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="container">
-    <h1>About</h1>
-  </div>
-</template>

examples/custom-routes/pages/users.vue

@@ -15,6 +15,7 @@
 import axios from 'axios'
 
 export default {
+  transition: 'bounce',
   data () {
     return axios.get('https://jsonplaceholder.typicode.com/users')
     .then((res) => {
@@ -45,4 +46,21 @@ export default {
 .router-link-active {
   color: #41b883 !important;
 }
+.bounce-enter-active {
+  animation: bounce-in .8s;
+}
+.bounce-leave-active {
+  animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+  0% { transform: scale(0) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+  0% { transform: scale(1) }
+  50% { transform: scale(1.5) }
+  100% { transform: scale(0) }
+}
+
 </style>

package.json

@@ -79,7 +79,7 @@
     "vue-server-renderer": "^2.1.3",
     "vue-template-compiler": "^2.1.3",
     "vuex": "^2.0.0",
-    "webpack": "2.2.0-rc.0",
+    "webpack": "2.2.0-rc",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.2"
   },