feat(vue-app): rename transition to pageTransition and deprecate it (#5558)

examples/routes-transitions/package.json

@@ -1,7 +1,6 @@
 {
   "name": "example-routes-transitions",
   "dependencies": {
-    "axios": "^0.15.3",
     "nuxt": "latest"
   },
   "scripts": {

examples/routes-transitions/pages/users.vue

@@ -28,8 +28,6 @@
 </template>
 
 <script>
-import axios from 'axios'
-
 export default {
   // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
   watchQuery: ['page'],
@@ -42,7 +40,8 @@ export default {
   },
   async asyncData({ query }) {
     const page = +query.page || 1
-    const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
+    const data = await fetch(`https://reqres.in/api/users?page=${page}`).then(res => res.json())
+
     return {
       page: +data.page,
       totalPages: data.total_pages,

packages/builder/src/context/template.js

@@ -37,7 +37,7 @@ export default class TemplateContext {
         typeof options.loading === 'string'
           ? builder.relativeToBuild(options.srcDir, options.loading)
           : options.loading,
-      transition: options.transition,
+      pageTransition: options.pageTransition,
       layoutTransition: options.layoutTransition,
       dir: options.dir,
       components: {

packages/builder/test/context/__snapshots__/template.test.js.snap

@@ -71,19 +71,22 @@ TemplateContext {
         "test": "test message",
       },
       "mode": "test mode",
+      "pageTransition": Object {
+        "name": "test_trans",
+      },
       "router": Object {
         "route": "test",
       },
       "srcDir": "test_src_dir",
       "store": "test_store",
       "test": "test_test",
-      "transition": Object {
-        "name": "test_trans",
-      },
       "vue": Object {
         "config": "test_config",
       },
     },
+    "pageTransition": Object {
+      "name": "test_trans",
+    },
     "plugins": Array [
       "plugins",
     ],
@@ -94,9 +97,6 @@ TemplateContext {
       "testSC": true,
     },
     "store": "test_store",
-    "transition": Object {
-      "name": "test_trans",
-    },
     "uniqBy": [Function],
     "vue": Object {
       "config": "test_config",

packages/builder/test/context/template.test.js

@@ -37,7 +37,7 @@ describe('builder: buildContext', () => {
     },
     srcDir: 'test_src_dir',
     loading: 'test-loading',
-    transition: { name: 'test_trans' },
+    pageTransition: { name: 'test_trans' },
     layoutTransition: { name: 'test_layout_trans' },
     dir: ['test_dir'],
     ErrorPage: 'test_error_page'

packages/config/src/config/_app.js

@@ -42,7 +42,7 @@ export default () => ({
 
   loadingIndicator: 'default',
 
-  transition: {
+  pageTransition: {
     name: 'page',
     mode: 'out-in',
     appear: false,

packages/config/src/options.js

@@ -35,8 +35,16 @@ export function getNuxtConfig(_options) {
     options._routerBaseSpecified = true
   }
 
-  if (typeof options.transition === 'string') {
+  // TODO: Remove for Nuxt 3
-    options.transition = { name: options.transition }
+  // transition -> pageTransition
+  if (typeof options.transition !== 'undefined') {
+    consola.warn('`transition` property is deprecated in favor of `pageTransition` and will be removed in Nuxt 3')
+    options.pageTransition = options.transition
+    delete options.transition
+  }
+
+  if (typeof options.pageTransition === 'string') {
+    options.pageTransition = { name: options.pageTransition }
   }
 
   if (typeof options.layoutTransition === 'string') {
@@ -275,8 +283,8 @@ export function getNuxtConfig(_options) {
   defaultsDeep(options, modePreset || options.modes.universal)
 
   // If no server-side rendering, add appear true transition
-  if (options.render.ssr === false && options.transition) {
+  if (options.render.ssr === false && options.pageTransition) {
-    options.transition.appear = true
+    options.pageTransition.appear = true
   }
 
   // We assume the SPA fallback path is 404.html (for GitHub Pages, Surge, etc.)

packages/config/test/__snapshots__/options.test.js.snap

@@ -256,6 +256,14 @@ Object {
     "/var/nuxt/node_modules",
     "/var/nuxt/test/node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -332,14 +340,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": false,

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -230,6 +230,14 @@ Object {
   "modulesDir": Array [
     "node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -305,14 +313,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": undefined,
@@ -562,6 +562,14 @@ Object {
   "modulesDir": Array [
     "node_modules",
   ],
+  "pageTransition": Object {
+    "appear": false,
+    "appearActiveClass": "appear-active",
+    "appearClass": "appear",
+    "appearToClass": "appear-to",
+    "mode": "out-in",
+    "name": "page",
+  },
   "plugins": Array [],
   "render": Object {
     "bundleRenderer": Object {
@@ -637,14 +645,6 @@ Object {
     "less",
   ],
   "test": true,
-  "transition": Object {
-    "appear": false,
-    "appearActiveClass": "appear-active",
-    "appearClass": "appear",
-    "appearToClass": "appear-to",
-    "mode": "out-in",
-    "name": "page",
-  },
   "vue": Object {
     "config": Object {
       "performance": undefined,

packages/config/test/options.test.js

@@ -53,12 +53,20 @@ describe('config: options', () => {
     })
   })
 
-  test('should transform transition/layoutTransition to name', () => {
+  test('[Compatibility] should transform transition to pageTransition', () => {
-    const { transition, layoutTransition } = getNuxtConfig({
+    const { pageTransition, transition } = getNuxtConfig({
-      transition: 'test-tran',
+      transition: 'test-tran'
+    })
+    expect(pageTransition).toMatchObject({ name: 'test-tran' })
+    expect(transition).toBeUndefined()
+  })
+
+  test('should transform pageTransition/layoutTransition to name', () => {
+    const { pageTransition, layoutTransition } = getNuxtConfig({
+      pageTransition: 'test-tran',
       layoutTransition: 'test-layout-tran'
     })
-    expect(transition).toMatchObject({ name: 'test-tran' })
+    expect(pageTransition).toMatchObject({ name: 'test-tran' })
     expect(layoutTransition).toMatchObject({ name: 'test-layout-tran' })
   })
 
@@ -96,9 +104,9 @@ describe('config: options', () => {
     expect(render.ssr).toEqual(true)
   })
 
-  test('should add appear true in transition when no ssr', () => {
+  test('should add appear true in pageTransition when no ssr', () => {
-    const { transition } = getNuxtConfig({ render: { ssr: false } })
+    const { pageTransition } = getNuxtConfig({ render: { ssr: false } })
-    expect(transition.appear).toEqual(true)
+    expect(pageTransition.appear).toEqual(true)
   })
 
   test('should return 404.html as default generate.fallback', () => {

packages/vue-app/template/index.js

@@ -36,7 +36,7 @@ Vue.use(Meta, {
 })
 
 const defaultTransition = <%=
-  serialize(transition)
+  serialize(pageTransition)
   .replace('beforeEnter(', 'function(').replace('enter(', 'function(').replace('afterEnter(', 'function(')
   .replace('enterCancelled(', 'function(').replace('beforeLeave(', 'function(').replace('leave(', 'function(')
   .replace('afterLeave(', 'function(').replace('leaveCancelled(', 'function(').replace('beforeAppear(', 'function(')

test/fixtures/basic/nuxt.config.js

@@ -63,7 +63,7 @@ export default {
     bad: null,
     '': true
   },
-  transition: false,
+  pageTransition: false,
   plugins: [
     '~/plugins/vuex-module',
     '~/plugins/dir-plugin',

test/fixtures/config-explicit/nuxt.config.js

@@ -2,7 +2,7 @@ import path from 'path'
 
 export default {
   modulesDir: path.join(__dirname, '..', '..', '..', 'node_modules'),
-  transition: false,
+  pageTransition: false,
   vue: {
     config: {
       silent: false,

test/fixtures/spa/nuxt.config.js

@@ -1,6 +1,6 @@
 export default {
   mode: 'spa',
-  transition: false,
+  pageTransition: false,
   render: {
     http2: {
       push: true

test/fixtures/with-config/nuxt.config.js

@@ -34,7 +34,7 @@ export default {
     }
   },
   modulesDir: [path.join(__dirname, '..', '..', '..', 'node_modules')],
-  transition: 'test',
+  pageTransition: 'test',
   layoutTransition: 'test',
   loadingIndicator: 'circle',
   extensions: 'ts',