Describe the feature

It would be nice to introduce the possibility to define support for view transition types in the experimental view transitions, as described in the Google View Transition Update.
I suggest introducing ViewTransitionOptions in nuxt.config.ts to allow defining a callback for the types:

experimental: {
  viewTransition: {
    enabled: true,
    defineTypes: (from, to) => [`${from.name?.toString()}-to-${to.name?.toString()}`],
  },
},

This way, you can define animations based on :active-view-transition-type(). In this way you could be able to define a slide animations or, more generally, asymmetric animations:

:active-view-transition-type(store-to-store-slug) {
  &::view-transition-old(selected-image) {
    // ...
  }

  &::view-transition-new(selected-image) {
    // ...
  }
}

:active-view-transition-type(store-slug-to-store) {
  &::view-transition-old(selected-image) {
    // ...
  }

  &::view-transition-new(selected-image) {
    // ...
  }
}

To implement this, it should be enough to define ViewTransitionOptions and add the following to view-transitions.client.ts:

transition = document.startViewTransition!({
  // @ts-expect-error update is not in the type
  update: async () => {
    changeRoute()
    return promise
  },
  types: appViewTransitionTypes(from, to),
})

P.S. maybe could be useful this as default type for the transitions:

`${from.name?.toString().replace(/___[^_]*$/, '')}-to-${to.name?.toString().replace(/___[^_]*$/, '')}`

where .replace(/___[^_]*$/, '')} is to handle localized routes.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.