feat(nuxt): controllable view transition

[horvbalint]

🔗 Linked issue

resolve #25263

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 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)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

To solve the problem mentioned in the linked issue, this PR adds support for the viewTransition property inside PageMeta.
Similary how pageTransition works, this can be enabled inside nuxt.config.ts's app property globaly, or on a per-page basis using the definePageMeta composable.
View transitions can also be enabled/disabled in a middleware using the to.meta.viewTransition value (again, similary how pageTransitions work).

After this PR the experimental.viewTransition property does not by itself enables view-transitions on the pages, but only loads the view-transition plugin inside nuxt. One have to enable view transitions using the app.viewTransition property or on a per-page basis.
As suggested in the code review below, if experimental.viewTransition is set, app.viewTransition uses its value as default.

We are not sure how to conditionaly enable the viewTransition property inside the d.ts files, so that typescript knows that the PageMeta.viewTransition is only available when the experimental.viewTransition value is set to true.

Initially, we also added checks for the prefer-reduced-motion user setting, so that nuxt would skip the transition if set to reduce. Later we found this PR which does the same, so we reverted that. If that PR gets merged, then this PR should be updated to allow always inside PageMeta.viewTransition , instead of leaving that in experimental.viewTransition, since we use that only as a feature guard.

We also tried to add documentation for the changes.

We are not very familiar with testing frameworks and are not sure if this functionality is testable or not. So if tests are needed, we would like to get some help :)

(we checked the breaking change checkbox, but since this is an experimental feature, this might not count as one)

📝 Checklist

• I have linked an issue or discussion.
• I have added tests (if possible).
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	6a2f866

[huang-julien]

good to me ! thank you !

[lukewarlow]

The PR with prefers reduced motion changes has been merged fyi

[horvbalint]

Thanks!
I moved the always option from Experimental to PageMeta and with this I had to move the check into the router.beforeResolve callback, since always can now be set on a per page basis.

[norbertSG]

Hello, I faced to an issue related to viewTransition, on android mobile(samsung) if we have a sticky bottom container, the elements/components inside are dissapear and appear on page change.
Take a look and let me know if there is any solution for this.

https://stackblitz.com/edit/nuxt-view-transitions-5q9zqa?file=app.vue

[horvbalint]

@norbertSG this is not an issue with Nuxt, you can read about it here: https://www.nicchan.me/blog/view-transitions-and-stacking-context/
Basically you have to include the sticky elements in the transition as well :)