chore(examples): update scroll-behavior example (#4398)

#2738 [skip release]

examples/scroll-behavior/layouts/default2.vue

@@ -0,0 +1,3 @@
+<template>
+  <nuxt />
+</template>

examples/scroll-behavior/nuxt.config.js

@@ -1,3 +1,4 @@
 export default {
-  css: ['~/assets/main.css']
+  css: ['~/assets/main.css'],
+  modules: ['@nuxtjs/axios']
 }

examples/scroll-behavior/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-scroll-behavior",
   "dependencies": {
-    "axios": "^0.15.3",
+    "@nuxtjs/axios": "^5.3.6",
     "nuxt-edge": "latest",
     "vue-router": "https://github.com/homerjam/vue-router#dist"
   },

examples/scroll-behavior/pages/another-long.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="container">
+    <h1>Another long page</h1>
+    <div class="spacer" style="width: 100%; height: 3000px; background: darkgreen" />
+    <nuxt-link to="/">Home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'default2',
+  scrollToTop: true
+}
+</script>

examples/scroll-behavior/pages/index.vue

@@ -22,5 +22,6 @@
       </NuxtLink>
     </p>
     <div class="spacer" style="width: 100%; height: 3000px; background: grey" />
+    <p><nuxt-link to="/another-long">Another long page</nuxt-link></p>
   </div>
 </template>

examples/scroll-behavior/pages/users.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 
 export default {
   // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
@@ -40,9 +39,9 @@ export default {
     if (!from) return 'slide-left'
     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
   },
-  async asyncData({ query }) {
+  async asyncData({ query, $axios }) {
     const page = +query.page || 1
-    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    const data = await $axios.$get(`https://reqres.in/api/users?page=${page}`)
     return {
       page: +data.page,
       totalPages: data.total_pages,