From ec0bff17f1a37b815219cd6a5b0a12e4a595af59 Mon Sep 17 00:00:00 2001 From: Noel De Martin Date: Fri, 25 Apr 2025 14:40:07 +0200 Subject: [PATCH] docs: note about initial navigation and transitions (#2392) (#2397) Co-authored-by: Eduardo San Martin Morote --- packages/docs/guide/advanced/transitions.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md index 3af7f6ad..6c78435c 100644 --- a/packages/docs/guide/advanced/transitions.md +++ b/packages/docs/guide/advanced/transitions.md @@ -80,5 +80,17 @@ Vue might automatically reuse components that look alike, avoiding any transitio ``` - +## Initial navigation and transitions + +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): + +```ts +const app = createApp(App) +app.use(router) + +// mount after the initial navigation is ready +await router.isReady() +app.mount('#app') +``` + -- 2.47.2