Page Transitions are a great way to add some flair to your webpage or application. They not only look great but also communicate the flow of your application to the user. We already have CSS Animations and Transistions, but, they are not easy to implement and maintain. View Transitions gives an easier way to add page transitions by allowing you to make DOM changes directly using snapshotted views.

Enable View Transitions in NuxtJS 3

NuxtJS 3 comes with built-in support for View Transitions. This feature is still experimental and is not enabled by default.

To enable View Transitions, we need to add the following code in nuxt.config.ts file.

export default defineNuxtConfig({
  experimental: {
    viewTransition: true,
  },
});

Using View Transitions

View Transition API ships with some default animations, that works out of the box. Animations can be further customized by using startViewTransition method. For more details Read MDN documentation

Compatability

Transition API is fairly new and is only supported in Chrome 111 and above. It should work out of the box on Chrome based browsers like Edge, Brave, etc. This feature is not supported in Firefox and Safari. You can track the progress of this feature in Can I Use