@vite-tts/vue

Vue 3 component and composable for vite-plugin-tts.

Supports pre-generated build-time audio and dynamic client-side Web Speech fallback with accessible defaults.

📦 Installation

pnpm add @vite-tts/vue
# or
npm install @vite-tts/vue

🚀 Usage

<TTS> Component

<template>
  <main>
    <!-- Pre-generated static audio -->
    <TTS
      text="Welcome to our Vue application!"
      src="/tts-audio/welcome.wav"
      :controls="true"
    />

    <!-- Client-side Web Speech API playback -->
    <TTS
      text="नमस्ते! हमारी वेबसाइट में आपका स्वागत है।"
      lang="hi-IN"
      :controls="true"
    />
  </main>
</template>

<script setup lang="ts">
import { TTS } from '@vite-tts/vue'
</script>

useTTS Composable

Build custom headless playback controls:

<template>
  <div class="player-controls">
    <button
      @click="status === 'playing' ? pause() : play()"
      :aria-label="status === 'playing' ? 'Pause narration' : 'Play narration'"
    >
      {{ status === 'playing' ? '⏸ Pause' : '▶ Play' }}
    </button>
    <button @click="stop" aria-label="Stop narration">
      ⏹ Stop
    </button>
    <p v-if="error" role="alert" class="error">{{ error.message }}</p>
  </div>
</template>

<script setup lang="ts">
import { useTTS } from '@vite-tts/vue'

const { status, play, pause, stop, error } = useTTS({
  text: 'Hello from Vue Composable!',
  src: '/tts-audio/hello.wav',
})
</script>

📄 License

MIT