Vue integration

ultra-text
for TresJS

Your HTML. One component. Text in your Vue scene.

<UltraText :source="source" />

Copy the starter once, then use it in your scene

Keep your source HTML accessible. Change its text or layout as usual, and the scene updates automatically. The starter handles WebGPU setup, fonts and cleanup.

Checked 28 October 2026
TresJS 5.10.0 · Vue 3.5.44 · Three.js 0.186.1

Get started ↓ API docs React Three Fiber guide Mini3 & Vanilla JS guide

01 — Install & copy

Add it to your app

In an existing Vue app, install the latest stable framework with ultra-text’s supported Three.js version:

npm install ultra-text @tresjs/core@latest vue@latest three@~0.186.1
npm install -D @types/three@0.186

Install — Three.js stays on the supported r186 release

Save these two files in src/components/:

These are ordinary source files you can adapt, covered by the MIT License. They are ready for you or your coding agent to copy into your project.

For a Vue app built with Vite, add TresJS’s template compiler options once:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { templateCompilerOptions } from '@tresjs/core'

export default defineConfig({
  plugins: [vue({ ...templateCompilerOptions })],
})

vite.config.ts — merge this plugin setup into your existing config

02 — Render

Mark your text. Add the component.

<script setup lang="ts">
import { shallowRef } from 'vue'
import UltraText from './components/UltraText.vue'
import UltraTextCanvas from './components/UltraTextCanvas.vue'

const source = shallowRef<HTMLElement | null>(null)
</script>

<template>
  <article ref="source" style="width: 320px; background: #fff; color: #111; font: 24px sans-serif">
    <p data-sdf-block>Hello TresJS.</p>
  </article>
  <div style="height: 400px">
    <UltraTextCanvas>
      <UltraText :source="source" />
    </UltraTextCanvas>
  </div>
</template>

App.vue — complete usage example

data-sdf-block marks the text to capture. Keep the source connected and visible with a real layout box. Bind text through Vue as usual; the component observes those DOM changes.

The canvas centers the text with 100 CSS pixels per world unit. It stays decorative and hidden from assistive technology while the source HTML carries the meaning. In an SSR app, mount the canvas on the client.

03 — Make it yours

Use the normal text options

Most apps can use the defaults. Pass a stable options object when you want settings from the library API:

// Keep this object in <script setup>.
const textOptions = { quality: 'high' } as const

// In the template:
<UltraText :source="source" :options="textOptions" />

Optional — higher sampling quality

Starter motion is off. Enable options.motion when you want animation. The canvas renders continuously so source updates and animated fills appear automatically.

Already have a TresJS canvas?

Use UltraText inside your existing canvas with an initialized WebGPURenderer from three/webgpu. The canvas starter is just a convenience; your scene can still contain models, lights and other components. Keep a continuous render loop for observed updates.

See the official TresJS WebGPU setup. The classic WebGLRenderer cannot render ultra-text’s TSL materials.

What the copied component takes care of

It waits for fonts, captures the source once, observes DOM changes, cancels superseded work and disposes its resources on unmount. Replacing the source creates a fresh capture. Capture and rebuild stay outside the frame loop.

The components are consumer source, not extra npm exports. Import the library from ultra-text and keep one Three.js installation within its peer range.

Working with a coding agent? Give it the integration instructions. They include permission to copy and adapt these MIT examples, plus the setup and lifecycle rules.