Page Transitions

Vulmix provides a simple way to add page transitions to your Vue application.

Creating a transition

To create page transitions during navigation, first you need to add the following configuration to your vulmix.config.ts file:

export default defineVulmixConfig({
  transition: {
    name: 'name-of-transition', // e.g. 'fade'
  },
})

Then, you create your transition using CSS. Here is an example of a simple fade transition:

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

That's it! Now, when you navigate between pages, the transition will be applied.