Vue

Tegaki provides a Vue 3 component (Composition API) with SSR support and deep reactive prop watching.

Installation

npm

npm install tegaki vue

pnpm

pnpm add tegaki vue

bun

bun add tegaki vue

Basic example

<script setup>
import { TegakiRenderer } from 'tegaki/vue';
import bundle from 'tegaki/fonts/caveat';
</script>

<template>
  <TegakiRenderer
    :font="bundle"
    text="Hello World"
    :time="{ mode: 'uncontrolled', speed: 1, loop: true }"
    :style="{ fontSize: '48px' }"
  />
</template>

Controlled time

Use v-model or a reactive ref to drive the animation:

<script setup>
import { ref } from 'vue';
import { TegakiRenderer } from 'tegaki/vue';
import bundle from 'tegaki/fonts/caveat';

const time = ref(0);
</script>

<template>
  <input type="range" :min="0" :max="10" :step="0.01" v-model.number="time" />

  <TegakiRenderer
    :font="bundle"
    text="Scrub me!"
    :time="time"
    :style="{ fontSize: '48px' }"
  />
</template>

Effects

<script setup>
import { TegakiRenderer } from 'tegaki/vue';
import bundle from 'tegaki/fonts/caveat';
</script>

<template>
  <TegakiRenderer
    :font="bundle"
    text="Fancy effects"
    :time="{ mode: 'uncontrolled', speed: 1, loop: true }"
    :effects="{
      glow: { radius: 8, color: '#00ccff' },
      pressureWidth: true,
      gradient: { colors: 'rainbow' },
    }"
    :style="{ fontSize: '48px' }"
  />
</template>

Streaming text

<script setup>
import { TegakiRenderer } from 'tegaki/vue';
import bundle from 'tegaki/fonts/caveat';

const props = defineProps<{ text: string }>();
</script>

<template>
  <TegakiRenderer
    :font="bundle"
    :text="props.text"
    :time="{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }"
    :style="{ fontSize: '32px' }"
  />
</template>

Exposed instance

The component exposes engine and element via template refs:

<script setup>
import { ref, onMounted } from 'vue';
import { TegakiRenderer } from 'tegaki/vue';
import bundle from 'tegaki/fonts/caveat';

const tegaki = ref();

onMounted(() => {
  console.log(tegaki.value.engine); // TegakiEngine instance
});
</script>

<template>
  <TegakiRenderer
    ref="tegaki"
    :font="bundle"
    text="Hello World"
    :time="{ mode: 'uncontrolled', speed: 1 }"
    :style="{ fontSize: '48px' }"
  />
</template>

Props

The Vue component accepts all TegakiEngineOptions as props.