Skip to content

Commit 01acf66

Browse files
Sébastien Chopinpi0
Sébastien Chopin
authored and
pi0
committed
feat(vue-app): rename transition to pageTransition and deprecate it (nuxt#5558)
1 parent 8b45da0 commit 01acf66

15 files changed

Lines changed: 67 additions & 53 deletions

File tree

‎examples/routes-transitions/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "example-routes-transitions",
33
"dependencies": {
4-
"axios": "^0.15.3",
54
"nuxt": "latest"
65
},
76
"scripts": {

‎examples/routes-transitions/pages/users.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
</template>
2929

3030
<script>
31-
import axios from 'axios'
32-
3331
export default {
3432
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
3533
watchQuery: ['page'],
@@ -42,7 +40,8 @@ export default {
4240
},
4341
async asyncData({ query }) {
4442
const page = +query.page || 1
45-
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
43+
const data = await fetch(`https://reqres.in/api/users?page=${page}`).then(res => res.json())
44+
4645
return {
4746
page: +data.page,
4847
totalPages: data.total_pages,

‎packages/builder/src/context/template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default class TemplateContext {
3737
typeof options.loading === 'string'
3838
? builder.relativeToBuild(options.srcDir, options.loading)
3939
: options.loading,
40-
transition: options.transition,
40+
pageTransition: options.pageTransition,
4141
layoutTransition: options.layoutTransition,
4242
dir: options.dir,
4343
components: {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,19 +71,22 @@ TemplateContext {
7171
"test": "test message",
7272
},
7373
"mode": "test mode",
74+
"pageTransition": Object {
75+
"name": "test_trans",
76+
},
7477
"router": Object {
7578
"route": "test",
7679
},
7780
"srcDir": "test_src_dir",
7881
"store": "test_store",
7982
"test": "test_test",
80-
"transition": Object {
81-
"name": "test_trans",
82-
},
8383
"vue": Object {
8484
"config": "test_config",
8585
},
8686
},
87+
"pageTransition": Object {
88+
"name": "test_trans",
89+
},
8790
"plugins": Array [
8891
"plugins",
8992
],
@@ -94,9 +97,6 @@ TemplateContext {
9497
"testSC": true,
9598
},
9699
"store": "test_store",
97-
"transition": Object {
98-
"name": "test_trans",
99-
},
100100
"uniqBy": [Function],
101101
"vue": Object {
102102
"config": "test_config",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('builder: buildContext', () => {
3737
},
3838
srcDir: 'test_src_dir',
3939
loading: 'test-loading',
40-
transition: { name: 'test_trans' },
40+
pageTransition: { name: 'test_trans' },
4141
layoutTransition: { name: 'test_layout_trans' },
4242
dir: ['test_dir'],
4343
ErrorPage: 'test_error_page'

‎packages/config/src/config/_app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default () => ({
4242

4343
loadingIndicator: 'default',
4444

45-
transition: {
45+
pageTransition: {
4646
name: 'page',
4747
mode: 'out-in',
4848
appear: false,

‎packages/config/src/options.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,16 @@ export function getNuxtConfig(_options) {
3535
options._routerBaseSpecified = true
3636
}
3737

38-
if (typeof options.transition === 'string') {
39-
options.transition = { name: options.transition }
38+
// TODO: Remove for Nuxt 3
39+
// transition -> pageTransition
40+
if (typeof options.transition !== 'undefined') {
41+
consola.warn('`transition` property is deprecated in favor of `pageTransition` and will be removed in Nuxt 3')
42+
options.pageTransition = options.transition
43+
delete options.transition
44+
}
45+
46+
if (typeof options.pageTransition === 'string') {
47+
options.pageTransition = { name: options.pageTransition }
4048
}
4149

4250
if (typeof options.layoutTransition === 'string') {
@@ -275,8 +283,8 @@ export function getNuxtConfig(_options) {
275283
defaultsDeep(options, modePreset || options.modes.universal)
276284

277285
// If no server-side rendering, add appear true transition
278-
if (options.render.ssr === false && options.transition) {
279-
options.transition.appear = true
286+
if (options.render.ssr === false && options.pageTransition) {
287+
options.pageTransition.appear = true
280288
}
281289

282290
// We assume the SPA fallback path is 404.html (for GitHub Pages, Surge, etc.)

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,14 @@ Object {
256256
"/var/nuxt/node_modules",
257257
"/var/nuxt/test/node_modules",
258258
],
259+
"pageTransition": Object {
260+
"appear": false,
261+
"appearActiveClass": "appear-active",
262+
"appearClass": "appear",
263+
"appearToClass": "appear-to",
264+
"mode": "out-in",
265+
"name": "page",
266+
},
259267
"plugins": Array [],
260268
"render": Object {
261269
"bundleRenderer": Object {
@@ -332,14 +340,6 @@ Object {
332340
"less",
333341
],
334342
"test": true,
335-
"transition": Object {
336-
"appear": false,
337-
"appearActiveClass": "appear-active",
338-
"appearClass": "appear",
339-
"appearToClass": "appear-to",
340-
"mode": "out-in",
341-
"name": "page",
342-
},
343343
"vue": Object {
344344
"config": Object {
345345
"performance": false,

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,14 @@ Object {
230230
"modulesDir": Array [
231231
"node_modules",
232232
],
233+
"pageTransition": Object {
234+
"appear": false,
235+
"appearActiveClass": "appear-active",
236+
"appearClass": "appear",
237+
"appearToClass": "appear-to",
238+
"mode": "out-in",
239+
"name": "page",
240+
},
233241
"plugins": Array [],
234242
"render": Object {
235243
"bundleRenderer": Object {
@@ -305,14 +313,6 @@ Object {
305313
"less",
306314
],
307315
"test": true,
308-
"transition": Object {
309-
"appear": false,
310-
"appearActiveClass": "appear-active",
311-
"appearClass": "appear",
312-
"appearToClass": "appear-to",
313-
"mode": "out-in",
314-
"name": "page",
315-
},
316316
"vue": Object {
317317
"config": Object {
318318
"performance": undefined,
@@ -562,6 +562,14 @@ Object {
562562
"modulesDir": Array [
563563
"node_modules",
564564
],
565+
"pageTransition": Object {
566+
"appear": false,
567+
"appearActiveClass": "appear-active",
568+
"appearClass": "appear",
569+
"appearToClass": "appear-to",
570+
"mode": "out-in",
571+
"name": "page",
572+
},
565573
"plugins": Array [],
566574
"render": Object {
567575
"bundleRenderer": Object {
@@ -637,14 +645,6 @@ Object {
637645
"less",
638646
],
639647
"test": true,
640-
"transition": Object {
641-
"appear": false,
642-
"appearActiveClass": "appear-active",
643-
"appearClass": "appear",
644-
"appearToClass": "appear-to",
645-
"mode": "out-in",
646-
"name": "page",
647-
},
648648
"vue": Object {
649649
"config": Object {
650650
"performance": undefined,

‎packages/config/test/options.test.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,20 @@ describe('config: options', () => {
5353
})
5454
})
5555

56-
test('should transform transition/layoutTransition to name', () => {
57-
const { transition, layoutTransition } = getNuxtConfig({
58-
transition: 'test-tran',
56+
test('[Compatibility] should transform transition to pageTransition', () => {
57+
const { pageTransition, transition } = getNuxtConfig({
58+
transition: 'test-tran'
59+
})
60+
expect(pageTransition).toMatchObject({ name: 'test-tran' })
61+
expect(transition).toBeUndefined()
62+
})
63+
64+
test('should transform pageTransition/layoutTransition to name', () => {
65+
const { pageTransition, layoutTransition } = getNuxtConfig({
66+
pageTransition: 'test-tran',
5967
layoutTransition: 'test-layout-tran'
6068
})
61-
expect(transition).toMatchObject({ name: 'test-tran' })
69+
expect(pageTransition).toMatchObject({ name: 'test-tran' })
6270
expect(layoutTransition).toMatchObject({ name: 'test-layout-tran' })
6371
})
6472

@@ -96,9 +104,9 @@ describe('config: options', () => {
96104
expect(render.ssr).toEqual(true)
97105
})
98106

99-
test('should add appear true in transition when no ssr', () => {
100-
const { transition } = getNuxtConfig({ render: { ssr: false } })
101-
expect(transition.appear).toEqual(true)
107+
test('should add appear true in pageTransition when no ssr', () => {
108+
const { pageTransition } = getNuxtConfig({ render: { ssr: false } })
109+
expect(pageTransition.appear).toEqual(true)
102110
})
103111

104112
test('should return 404.html as default generate.fallback', () => {

0 commit comments

Comments
 (0)