Nuxt re-exports the full Vue surface plus a plugin factory, so you get to choose: import a composable in the one component that needs it, or register every component once and use them anywhere without imports. Both are SSR-safe — the engine only starts after mount, so server rendering never touches the DOM.
Composable, component, or plugin
svg-scroll-draw/nuxt — every sample below is written against the wrappers this package actually exports.
<script setup>
import { useScrollDraw } from 'svg-scroll-draw/nuxt';
const container = useScrollDraw({ easing: 'ease-out', speed: 1.2 });
</script>
<template>
<div ref="container">
<svg viewBox="0 0 200 100">
<path d="M10 50 Q 100 10 190 50" stroke="#111" fill="none" />
</svg>
</div>
</template>import { createScrollDrawPlugin } from 'svg-scroll-draw/nuxt';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(createScrollDrawPlugin());
});
// Now <ScrollDraw>, <ScrollAnimate>, <ScrollCounter> and <ScrollText>
// are available in any component with no import.<template>
<!-- No <script setup> import needed once the plugin is registered -->
<ScrollDraw :speed="1.2" once>
<svg viewBox="0 0 200 100">
<path d="M10 50 Q 100 10 190 50" stroke="#111" fill="none" />
</svg>
</ScrollDraw>
<ScrollText :split="'words'" :stagger="0.05">
Every API, one package.
</ScrollText>
</template>Worth knowing: The Nuxt entry re-exports the Vue wrappers rather than reimplementing them, so anything true of the Vue API is true here — including that the composables return refs you bind, rather than taking a ref as an argument.
10 KB gzipped for every API at once, and each one is a separate entry point — so a page that only reveals elements ships 3.9 KB, not the lot. The equivalent GSAP stack for the same work is 47.5 KB, which makes this 4.75× smaller. GSAP is free and considerably broader; if you need timelines, Draggable or Flip, use GSAP.
Measured 2026-08-14 at gzip level 9 against gsap 3.15.0 and svg-scroll-draw 2.10.0. Full comparison →
Install svg-scroll-draw and import useScrollDraw or ScrollDraw from svg-scroll-draw/nuxt in any component. Alternatively register createScrollDrawPlugin() in a Nuxt plugin to make every component globally available without imports.
Yes. Initialisation happens in onMounted, so nothing runs during server rendering and there is no window or document access on the server. No <ClientOnly> wrapper is needed.
Import per component if only a few components animate — it keeps the bundle smaller through tree-shaking. Use the plugin if animations appear across most pages and the repeated imports become noise.