View Transitions API primitives for Vue.js

Installation

1npm i @nag5000/vue-view-transition

Usage

useViewTransition composable

1<template>
2  <button @click="toggle">Toggle</button>
3
4  <span v-if="flag">🦄</span>
5  <span v-else class="rotate-90 scale-150">🌸</span>
6</template>
7
8<script lang="ts" setup>
9import { ref } from 'vue'
10import { useViewTransition } from '@nag5000/vue-view-transitions'
11
12const { startViewTransition } = useViewTransition()
13const flag = ref(false)
14
15function toggle() {
16  startViewTransition(() => {
17    flag.value = !flag.value
18  })
19}
20</script>
21
22<style scoped>
23span {
24  view-transition-name: 🦄🌸;
25}
26</style>

<ViewTransition> component

1<template>
2  <button @click="toggle">Toggle</button>
3
4  <ViewTransition>
5    <span v-if="flag">🦄</span>
6    <span v-else class="rotate-90 scale-150">🌸</span>
7  </ViewTransition>
8</template>
9
10<script lang="ts" setup>
11import { ref } from 'vue'
12import { ViewTransition } from '@nag5000/vue-view-transitions'
13
14const flag = ref(false)
15
16function toggle() {
17  flag.value = !flag.value
18}
19</script>

Documentation and Demos

Check them out on the website: https://vue-view-transitions.vercel.app/