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

yarn

yarn 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>

Plugins

Glows, gradients, tapered ends and the rest are plugins. Import the factories from tegaki/vue and pass the plugins in a list:

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

const plugins = [strokeGradientPlugin(), glowPlugin({ radius: 0.1, color: '#00ccff' })];
</script>

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

Make the list in <script setup>, not inline in the template, so the plugins aren’t made again on every render. Registered plugins can also be named, and a list of names is fine inline: :plugins="['taper', ['glow', { radius: 0.1 }]]". See Style plugins and Naming plugins. The pressure prop (0 to 1, default 1) sets how much the ink’s width follows the pen’s pressure.

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.