Quick start - Nuxt

Framework-agnostic - Nuxt is the Vue meta-framework. Call initAnimations() on the client after mount and again after each route change. Use a .client plugin and a route watcher in app.vue - same pattern as Vue router.afterEach and Svelte afterNavigate.

Usage - Client plugin

// plugins/gclass.client.ts
export default defineNuxtPlugin(() => {
  if (import.meta.client) {
    import('gclass-anims').then(({ initAnimations }) => {
      initAnimations()
    })
  }
})

Usage - Re-init on route change

SPA navigation does not reload the page, so re-wire the new DOM. Mirrors the verified test in app.vue:4 (watch fullPath + nextTick).

// app.vue
<script setup>
const route = useRoute()
watch(() => route.fullPath, async () => {
  if (import.meta.client) {
    await nextTick()
    const { initAnimations } = await import('gclass-anims')
    initAnimations()
  }
})

onMounted(async () => {
  if (import.meta.client) {
    await nextTick()
    const { initAnimations } = await import('gclass-anims')
    initAnimations()
  }
})
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

What's next

Add classes in SFC templates or pages/*.vue - class="appear scroll spawn-up", class="float magnet" - no wrapper needed. See quick-start-vue for Composition vs Options API parity and quick-start-js for class anatomy.