feat(nuxt): config options for default keepalive, page & layout transitions #5859

danielroe · 2022-07-12T15:54:39Z

🔗 Linked issue

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This allows support for configuring page & layout transition default values, as well as keepalive. (Otherwise there is the tedious task of doing so for every individual file.)

In order to do this, we now inject #build/app.config.mjs to automatically expose all values within the app key in Nuxt config, rather than creating ever-more virtual files for particular use-cases. (We would, for example, have had to do this for layouts and page transitions separately otherwise.) This means we were able to drop meta.config.mjs and in general is a useful pattern for future app configuration.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

netlify · 2022-07-12T15:54:44Z

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	`a414fcd`
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/6304c375fa5ce1000818a2af

packages/nuxt/src/core/templates.ts

pi0 · 2022-08-22T15:03:36Z

Thanks for rebasing. Shall we type appConfig.nuxt from schema now?

atinux · 2022-08-22T15:39:28Z

Beautiful work @danielroe ❤️

Shall we document more to use app.config.ts for such configurations from now on?

packages/schema/src/types/config.ts

pi0 · 2022-08-22T15:56:47Z

Shall we document more to use app.config.ts for such configurations from now on?

Currently, usage of useAppConfig().nuxt is kinda internal. For some, we might have built-time optimization opportunities (like not bundling transition bytes) while if we make users able to set via app.config, we cannot do this anymore as such config can be changed on runtime. I suggest not adding nuxt types from AppConfigInput as well for this PR (keep marking it as never for input but typing for AppConfig)

…rface

packages/schema/src/types/config.ts

pi0 · 2022-08-22T16:40:34Z

(fixture seems broken)

atinux · 2022-08-23T10:00:08Z

Could we take this opportunity to also give the possibility to set those values to false to disable keepalive, page & layout transitions?

danielroe · 2022-08-23T10:01:25Z

Indeed, that is one of the key use-cases of this PR. As implemented here, it is possible to set them to false and it will disable keepalive, page & layout transitions.

pi0 · 2022-08-23T10:09:12Z

packages/nuxt/src/pages/runtime/page.ts

-          return _wrapIf(Transition, routeProps.route.meta.pageTransition ?? defaultPageTransition,
-            wrapInKeepAlive(routeProps.route.meta.keepalive, isNested && nuxtApp.isHydrating
-            // Include route children in parent suspense
+          return _wrapIf(Transition, routeProps.route.meta.pageTransition ?? appConfig._nuxt.pageTransition,


For this, we could have a bundler flag (like NUXT_PAGE_TRANSITION) that replaces value to false on build time otherwise setting app config to false won't be able to tree-shake... (but can be later. pointing to make clear about false handling with this PR)

Yes. This PR does not enable tree-shaking out; it just sets default behaviour. We can't tree shake this way as user may wish to enable transitions/keepalive on a per-page basis.

I would love to be able to tree-shake out the Transition/Keepalive components but will it would need a different approach than this PR.

That's true. We use appConfig currently only to specify default but could be also used to specify feature flags. (swapping condition order when value is false to always disable transitions which I think would make more sense for false handling)

Maybe support an additional option, e.g. keepalive: 'disabled' as the user may simply wish to disable them by default but not for all routes?

pi0 · 2022-08-23T10:20:02Z

Thinking more about approaches, i think for specific nuxt bundled config, using an internal template with named exports (#build/nuxt.config.mjs ?) could be safer since we probably don't need nor could support HMR for these configs originating from nuxt.config and it makes it consistent with feature plans being able to treeshake at build time (appConfig is totally runtime-dynamic. we cannot depend on it for this unless passing another build flag)

danielroe · 2022-08-23T10:23:03Z

Okay - so just to confirm, we'll refactor back to original approach of this PR, but using nuxt.config.mjs filename?

pi0

LGTM.

danielroe added 2 commits July 12, 2022 16:50

feat(nuxt): config default keepalive, page & layout transitions

09e50a4

fix: move head defaults to schema

fe376f5

danielroe added enhancement New feature or request 🍰 p2-nice-to-have Priority 2: nothing is broken but it's worth addressing labels Jul 12, 2022

danielroe requested a review from atinux July 12, 2022 15:54

danielroe self-assigned this Jul 12, 2022

danielroe requested a review from pi0 July 13, 2022 12:16

Merge branch 'main' into feat/transition-config

6a8b0cf

danielroe commented Jul 27, 2022

View reviewed changes

packages/nuxt/src/core/templates.ts Outdated Show resolved Hide resolved

pi0 and others added 2 commits July 27, 2022 15:28

fix merge issue

33912d4

Merge remote-tracking branch 'origin/main' into feat/transition-config

e710fab

danielroe mentioned this pull request Jan 19, 2023

redirection within onMounted hook with transition enabled causes a hydration error nuxt/nuxt#14524

Closed

danielroe mentioned this pull request Aug 22, 2022

DOM is sometimes destroyed when navigating between routes nuxt/nuxt#14556

Closed

danielroe added 4 commits August 22, 2022 13:27

Merge remote-tracking branch 'origin/main' into feat/transition-config

98f6e99

refactor: use new app config feature for accessing app options

a947732

fix: remove unused import

2e7265b

fix: ignore types for appConfig.nuxt

0e1fd96

danielroe and others added 2 commits August 22, 2022 16:34

feat: type appconfig.nuxt from schema

e6d14d7

Merge branch 'main' into feat/transition-config

545f865

pi0 reviewed Aug 22, 2022

View reviewed changes

packages/schema/src/types/config.ts Outdated Show resolved Hide resolved

danielroe added 3 commits August 22, 2022 17:11

refactor: move types from app schema -> internal NuxtAppConfig inte…

4f46021

…rface

style: remove blank line

5a2ddf8

fix: revert changes

9e3635d

pi0 reviewed Aug 22, 2022

View reviewed changes

packages/schema/src/types/config.ts Outdated Show resolved Hide resolved

refactor: rename to _nuxt

b3bd9f7

pi0 approved these changes Aug 22, 2022

View reviewed changes

danielroe added 2 commits August 22, 2022 17:48

test: update fixture

670b949

fix: 🙈

3a47df8

pi0 reviewed Aug 23, 2022

View reviewed changes

atinux mentioned this pull request Aug 23, 2022

allow setting default route transition (page/layout) properties globally nuxt/nuxt#14265

Closed

danielroe added 3 commits August 23, 2022 12:56

refactor: use nuxt.config.mjs to serialize nuxt app options

7e64869

Merge branch 'main' into feat/transition-config

01702ac

test: update config

a414fcd

danielroe requested a review from pi0 August 23, 2022 12:22

pi0 approved these changes Aug 23, 2022

View reviewed changes

pi0 changed the title ~~feat(nuxt): config default keepalive, page & layout transitions~~ feat(nuxt): config options for default keepalive, page & layout transitions Aug 23, 2022

pi0 merged commit fc82b3b into main Aug 23, 2022

pi0 deleted the feat/transition-config branch August 23, 2022 14:24

pi0 mentioned this pull request Aug 26, 2022

v3.0.0-rc.9 #6970

Merged

danielroe added the 3.x label Jan 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(nuxt): config options for default keepalive, page & layout transitions #5859

feat(nuxt): config options for default keepalive, page & layout transitions #5859

danielroe commented Jul 12, 2022

netlify bot commented Jul 12, 2022 •

edited

Loading

pi0 commented Aug 22, 2022

atinux commented Aug 22, 2022

pi0 commented Aug 22, 2022 •

edited

Loading

pi0 commented Aug 22, 2022

atinux commented Aug 23, 2022

danielroe commented Aug 23, 2022 •

edited

Loading

pi0 Aug 23, 2022 •

edited

Loading

danielroe Aug 23, 2022

danielroe Aug 23, 2022

pi0 Aug 23, 2022

danielroe Aug 23, 2022

pi0 commented Aug 23, 2022 •

edited

Loading

danielroe commented Aug 23, 2022

pi0 left a comment

feat(nuxt): config options for default keepalive, page & layout transitions #5859

feat(nuxt): config options for default keepalive, page & layout transitions #5859

Conversation

danielroe commented Jul 12, 2022

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

netlify bot commented Jul 12, 2022 • edited Loading

✅ Deploy Preview for nuxt3-docs canceled.

pi0 commented Aug 22, 2022

atinux commented Aug 22, 2022

pi0 commented Aug 22, 2022 • edited Loading

pi0 commented Aug 22, 2022

atinux commented Aug 23, 2022

danielroe commented Aug 23, 2022 • edited Loading

pi0 Aug 23, 2022 • edited Loading

Choose a reason for hiding this comment

danielroe Aug 23, 2022

Choose a reason for hiding this comment

danielroe Aug 23, 2022

Choose a reason for hiding this comment

pi0 Aug 23, 2022

Choose a reason for hiding this comment

danielroe Aug 23, 2022

Choose a reason for hiding this comment

pi0 commented Aug 23, 2022 • edited Loading

danielroe commented Aug 23, 2022

pi0 left a comment

Choose a reason for hiding this comment

netlify bot commented Jul 12, 2022 •

edited

Loading

pi0 commented Aug 22, 2022 •

edited

Loading

danielroe commented Aug 23, 2022 •

edited

Loading

pi0 Aug 23, 2022 •

edited

Loading

pi0 commented Aug 23, 2022 •

edited

Loading