Nuxt Integration

Nuxt 3 works smoothly with StringTune as long as you start the engine on the client and refresh it whenever new markup is rendered. The snippets below reflect the actual API.

Installation

npm install @fiddle-digital/string-tune

Client Plugin

Create a client-only plugin that registers the modules you need and exposes the singleton instance through Nuxt.

// /app/plugins/string-tune.client.ts
import StringTune, { StringParallax, StringCursor, StringProgress } from '@fiddle-digital/string-tune';

export default defineNuxtPlugin((nuxtApp) => {
  const stringTune = StringTune.getInstance();
  stringTune.use(StringParallax);
  stringTune.use(StringCursor);
  stringTune.use(StringProgress);

  nuxtApp.hook('app:mounted', () => {
    stringTune.start(60);
  });

  return {
    provide: {
      stringTune,
    },
  };
});

The plugin runs once per browser tab. Additional use calls simply reuse the singleton.

Typing the Injection (optional)

// string-tune.d.ts
import type StringTune from '@fiddle-digital/string-tune';

declare module '#app' {
  interface NuxtApp {
    $stringTune: ReturnType<typeof StringTune.getInstance> | null;
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $stringTune: ReturnType<typeof StringTune.getInstance> | null;
  }
}

export {};

Nuxt Configuration

Register the plugins and include any shared styling you rely on for demos.

export default defineNuxtConfig({
  ...
  build: {
    transpile: ["@fiddle-digital/string-tune"],
  },
});

Using StringTune in Components

Markup annotated with string="…" is picked up automatically.

<template>
  <section class="hero" string="progress" string-id="hero-progress">
    <h1 class="hero__title" string="parallax" string-parallax="0.35">Nuxt + StringTune</h1>
    <button class="hero__cta" string="cursor" string-cursor-class="-cta">Hover me</button>
  </section>
</template>

<script setup lang="ts">
const { $stringTune: currentStringTune } = useNuxtApp();
function handleProgress(value: number) {
  console.log('Progress value:', value);
}
onMounted(() => {
  nextTick(() => {
    if (currentStringTune) {
      currentStringTune.on('object:progress:hero-progress', handleProgress);
    }
  });
});
onBeforeUnmount(() => {
  const { $stringTune: currentStringTune } = useNuxtApp();
  if (currentStringTune) {
    currentStringTune.off('object:progress:hero-progress', handleProgress);
  }
});
</script>

<style scoped>
.hero {
  min-height: 80vh;
  display: grid;
  place-content: center;
  gap: 1.5rem;
}

.hero__cta {
  justify-self: center;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transform: translate(calc(var(--x, 0) * 1rem), calc(var(--y, 0) * 1rem));
}
</style>

With this structure you get a predictable, typed, and Nuxt-friendly StringTune setup that mirrors the rest of the documentation.