From 1f6d89b2e9a568800947e8e0312dc92189f9ac31 Mon Sep 17 00:00:00 2001
From: Atinux <sebastien.chopin@neo9.fr>
Date: Mon, 6 Nov 2017 18:24:43 +0100
Subject: [PATCH] example: Update example, and use watchQuery

---
 examples/layout-transitions/assets/main.css   |  4 +-
 .../layout-transitions/layouts/secondary.vue  |  7 +-
 examples/layout-transitions/package.json      |  2 +-
 examples/layout-transitions/pages/index.vue   |  1 +
 examples/layout-transitions/pages/users-2.vue | 91 +++++++++++++++++++
 examples/layout-transitions/pages/users.vue   | 11 ++-
 6 files changed, 104 insertions(+), 12 deletions(-)
 create mode 100644 examples/layout-transitions/pages/users-2.vue

diff --git a/examples/layout-transitions/assets/main.css b/examples/layout-transitions/assets/main.css
index dbb73ba005..63b42c3f6f 100644
--- a/examples/layout-transitions/assets/main.css
+++ b/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;
diff --git a/examples/layout-transitions/layouts/secondary.vue b/examples/layout-transitions/layouts/secondary.vue
index d4a9065bd3..57a89e59ee 100644
--- a/examples/layout-transitions/layouts/secondary.vue
+++ b/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>
diff --git a/examples/layout-transitions/package.json b/examples/layout-transitions/package.json
index 38fd64e26c..822831ec96 100644
--- a/examples/layout-transitions/package.json
+++ b/examples/layout-transitions/package.json
@@ -5,7 +5,7 @@
     "nuxt": "latest"
   },
   "scripts": {
-    "dev": "../../bin/nuxt",
+    "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start"
   }
diff --git a/examples/layout-transitions/pages/index.vue b/examples/layout-transitions/pages/index.vue
index fe5ce74005..9b8b4fefa5 100644
--- a/examples/layout-transitions/pages/index.vue
+++ b/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>
diff --git a/examples/layout-transitions/pages/users-2.vue b/examples/layout-transitions/pages/users-2.vue
new file mode 100644
index 0000000000..e1a038e0f1
--- /dev/null
+++ b/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>
diff --git a/examples/layout-transitions/pages/users.vue b/examples/layout-transitions/pages/users.vue
index d608a5ad7f..f7399382cf 100644
--- a/examples/layout-transitions/pages/users.vue
+++ b/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
     }