Vue SDK

@tts2go/vue provides a Vue plugin, a useTTS composable, and a TTSButton component.

Installation

npm install @tts2go/vue

Setup

import { createApp } from "vue";
import { TTS2GoPlugin } from "@tts2go/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(TTS2GoPlugin, {
  apiKey: "tts_your_api_key",
  projectId: "your-project-id",
});

app.mount("#app");

TTSButton Component

Drop-in component with built-in playback state management:

<script setup lang="ts">
import { TTSButton } from "@tts2go/vue";
</script>

<template>
  <div>
    <p>Click below to hear this text read aloud.</p>
    <TTSButton
      content="Click below to hear this text read aloud."
      voice-id="voice_abc123"
    />
  </div>
</template>

Props

Prop	Type	Description
`content`	`string`	Text to convert to speech (required)
`voice-id`	`string`	Voice identifier (required)
`class`	`string`	CSS class for the button

useTTS Composable

For custom UI, use the useTTS composable:

<script setup lang="ts">
import { useTTS } from "@tts2go/vue";

const { status, url, error, play, stop, pause } = useTTS(
  "Text to read aloud",
  "voice_abc123"
);
</script>

<template>
  <div>
    <p>Status: {{ status }}</p>
    <p v-if="error" style="color: red">{{ error }}</p>
    <button @click="play" :disabled="status === 'loading'">Play</button>
    <button @click="pause">Pause</button>
    <button @click="stop">Stop</button>
  </div>
</template>

Return value

Property	Type	Description
`status`	`ComputedRef<TTSStatus>`	Current playback status
`url`	`ComputedRef<string \| null>`	CDN URL once generated
`error`	`ComputedRef<string \| null>`	Error message if any
`play`	`() => Promise<void>`	Start playback
`stop`	`() => void`	Stop playback
`pause`	`() => void`	Pause playback

Provide/Inject

The plugin injects the TTS2Go client using Vue's provide/inject. The injection key is exported as TTS2GoKey if you need manual access:

import { inject } from "vue";
import { TTS2GoKey } from "@tts2go/vue";

const client = inject(TTS2GoKey);

TypeScript

import type { TTS2GoConfig, TTSStatus } from "@tts2go/vue";