From 0a05b8875f68ac5f559642e4b9ba2c119d68d3b8 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Wed, 30 Oct 2024 16:09:55 +0700 Subject: [PATCH 1/2] docs: document appear transition behaviour (#2392) --- packages/docs/guide/advanced/transitions.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md index 3af7f6ada..9a1dc98be 100644 --- a/packages/docs/guide/advanced/transitions.md +++ b/packages/docs/guide/advanced/transitions.md @@ -80,5 +80,23 @@ Vue might automatically reuse components that look alike, avoiding any transitio ``` +## Respecting `appear` transitions behaviour + +Usually, enter animations are ignored on the initial render unless you're using the `appear` prop. But you'll notice that route components don't respect this behaviour. This happens because the route component is not available in the initial render. + +You can fix this by making sure that the `` component isn't rendered until the first route component has been loaded: + +```vue-html + + + + + +``` + +Alternatively, you can also await on the router's [`isReady`](https://router.vuejs.org/api/interfaces/Router.html#isReady) method which returns a promise. + +Finally, you can support for more complex scenarios [combining the `` and `` components](https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components). + From 8b9edd2d077ac0ba8bdbec5fa443f617ac489089 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 25 Apr 2025 14:39:42 +0200 Subject: [PATCH 2/2] chore: reword --- packages/docs/guide/advanced/transitions.md | 22 ++++++++------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md index 9a1dc98be..6c78435cf 100644 --- a/packages/docs/guide/advanced/transitions.md +++ b/packages/docs/guide/advanced/transitions.md @@ -80,23 +80,17 @@ Vue might automatically reuse components that look alike, avoiding any transitio ``` -## Respecting `appear` transitions behaviour +## Initial navigation and transitions -Usually, enter animations are ignored on the initial render unless you're using the `appear` prop. But you'll notice that route components don't respect this behaviour. This happens because the route component is not available in the initial render. +Usually, enter animations are ignored by Vue's `` unless we add the `appear` prop. But you'll notice that, when using it alongside ``, transitions are **always** applied despite the `appear` prop not being set. This is because navigations are asynchronous in Vue Router, meaning that the Vue application renders once before the initial navigation is finished. There are different ways to adapt this. The easiest one is to await the initial navigation before mounting the app with [`isReady`](https://router.vuejs.org/api/interfaces/Router.html#isReady): -You can fix this by making sure that the `` component isn't rendered until the first route component has been loaded: +```ts +const app = createApp(App) +app.use(router) -```vue-html - - - - - +// mount after the initial navigation is ready +await router.isReady() +app.mount('#app') ``` -Alternatively, you can also await on the router's [`isReady`](https://router.vuejs.org/api/interfaces/Router.html#isReady) method which returns a promise. - -Finally, you can support for more complex scenarios [combining the `` and `` components](https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components). - -