examples

[719media]

Do you have any examples of this in use with vue-router? Is it possible to use this plugin to translate an element that exists in two different pages (e.g. an img)?

[Clarkkkk]

Yes, it works with vue-router. We need to start the transition in beforeResolve hook:

router.beforeResolve(async () => {
  const viewTransition = startViewTransition()
  await viewTransition.captured
})

And add v-view-transition-name for the elements in both pages.

<img :src="pic" v-view-transition-name="'img'" />

Note that the parameter in v-view-transition-name should be a valid JavaScript expression, so the string must be quoted.

You can check the code in the example link in readme if you haven't checked it.

[719media]

Thank you for the explanation.

What I learned was that, when using vue-router and this library, care must be taken in regards to usage of vue <Transition> with <RouterView>, a common implementation (see https://router.vuejs.org/guide/advanced/transitions). In some cases, the <Transition> will mess around with the expected results due to timing, and more specifically modes (see https://vuejs.org/guide/built-ins/transition#transition-modes).

For a quick proof of concept with this library, I found it easiest to just ensure <Transition> was not being used at all.

[Clarkkkk]

That's interesting. When using with <Transition>, maybe we could call the startViewTransition in the transition hooks to ensure the view status is correct. And the transition hooks seems suspendible, maybe we can await the viewTransition.captured to be resolved before the transition begins. I will do some experiments later.