Vue Component with PrimeVue + VueUse + Motion

DarkModeToggle.vue

<script setup lang="ts">
import {Button} from 'primevue'
import {useDark, useToggle} from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <Button @click="toggleDark()" size="small" text>
    <template #icon>
      <i v-if="isDark" class="pi pi-moon" v-motion
         :initial="{ rotate: 180, opacity: 0 }"
         :enter="{ rotate: 0, opacity: 1 }"
         :leave="{ rotate: 180, opacity: 0 }"></i>
      <i v-else class="pi pi-sun" v-motion
         :initial="{ rotate: 180, opacity: 0 }"
         :enter="{ rotate: 0, opacity: 1 }"
         :leave="{ rotate: 180, opacity: 0 }"></i>
    </template>
  </Button>
</template>

<style scoped></style>