example: Update example, and use watchQuery

examples/layout-transitions/assets/main.css

@@ -17,14 +17,14 @@ body {
 }
 
 .layout-enter-active, .layout-leave-active {
-  transition: opacity .5s
+  transition: opacity 0.5s
 }
 .layout-enter, .layout-leave-active {
   opacity: 0
 }
 
 .bounce-enter-active {
-  animation: bounce-in .8s;
+  animation: bounce-in .5s;
 }
 .bounce-leave-active {
   animation: bounce-out .5s;

examples/layout-transitions/layouts/secondary.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <menu>
-      <ul>
-        <li>Option 1</li>
-        <li>Option 2</li>
-      </ul>
-    </menu>
+    <h1>Secondary Layout</h1>
     <nuxt/>
   </div>
 </template>

examples/layout-transitions/package.json

@@ -5,7 +5,7 @@
     "nuxt": "latest"
   },
   "scripts": {
-    "dev": "../../bin/nuxt",
+    "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start"
   }

examples/layout-transitions/pages/index.vue

@@ -3,5 +3,6 @@
     <h1>Home page</h1>
     <p><nuxt-link to="/about">About page</nuxt-link></p>
     <p><nuxt-link to="/users">Lists of users</nuxt-link></p>
+    <p><nuxt-link to="/users-2">Lists of users #2 (with `watch`)</nuxt-link></p>
   </div>
 </template>

examples/layout-transitions/pages/users-2.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="container">
+    <nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
+    <a v-else class="disabled">&lt; Prev</a>
+    <span>{{ page }}/{{ totalPages }}</span>
+    <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
+    <a v-else class="disabled">Next &gt;</a>
+    <transition mode="out-in" :name="transitionName">
+      <ul :key="page">
+        <li v-for="user in users" :key="user.id">
+          <img :src="user.avatar" class="avatar" />
+          <span>{{ user.first_name }} {{ user.last_name }}</span>
+        </li>
+      </ul>
+    </transition>
+    <p><nuxt-link to="/">Back home</nuxt-link></p>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  watch: {
+    '$route.query.page': async function (page) {
+      this.$nuxt.$loading.start()
+      const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+      this.users = data.data
+      this.transitionName = this.getTransitionName(page)
+      this.page = +(page || 1)
+      this.totalPages = data.total_pages
+      this.$nuxt.$loading.finish()
+    }
+  },
+  async asyncData({ query }) {
+    const page = +(query.page || 1)
+    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    return {
+      page,
+      totalPages: data.total_pages,
+      users: data.data
+    }
+  },
+  data() {
+    return {
+      transitionName: this.getTransitionName(this.page)
+    }
+  },
+  methods: {
+    getTransitionName(newPage) {
+      return newPage < this.page ? 'slide-right' : 'slide-left'
+    }
+  }
+}
+</script>
+
+<style scoped>
+a {
+  display: inline-block;
+  margin: 0 1em;
+  color: #34495e;
+  text-decoration: none;
+}
+a.disabled {
+  color: #ccc;
+}
+ul {
+  margin: auto;
+  padding: 0;
+  width: 100%;
+  max-width: 400px;
+  padding-top: 40px;
+  transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+li {
+  list-style-type: none;
+  width: 400px;
+  border: 1px #ddd solid;
+  overflow: hidden;
+}
+li img {
+  float: left;
+  width: 100px;
+  height: 100px;
+}
+li span {
+  display: inline-block;
+  padding-top: 40px;
+  text-transform: uppercase;
+}
+</style>

examples/layout-transitions/pages/users.vue

@@ -6,7 +6,7 @@
     <nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
     <a v-else class="disabled">Next &gt;</a>
     <ul>
-      <li v-for="user in users">
+      <li v-for="user in users" :key="user.id">
         <img :src="user.avatar" class="avatar" />
         <span>{{ user.first_name }} {{ user.last_name }}</span>
       </li>
@@ -19,15 +19,20 @@
 import axios from 'axios'
 
 export default {
+  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
+  watchQuery: ['page'],
+  // Key for <nuxt-child> (transitions)
+  key: (to) => to.fullPath,
+  // Called to know which transition to apply
   transition(to, from) {
     if (!from) return 'slide-left'
     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
   },
   async asyncData({ query }) {
-    const page = query.page || 1
+    const page = +(query.page || 1)
     const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
     return {
-      page: +data.page,
+      page,
       totalPages: data.total_pages,
       users: data.data
     }