use-speech-recognition

Transcribe speech with the Web Speech API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useSpeechRecognition } from "@vizejs/composable/use-speech-recognition";

Try it

Dictate a search query

Turn speech into text with live interim results.

Open the interactive example

What to observe: Start dictation listens where the API exists; interim words appear while speaking and the final text after a pause.

continuous keeps listening across pauses. Recognition may send audio to a server, depending on the browser. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useMounted } from "@vizejs/composable/use-mounted";
import { useSpeechRecognition } from "@vizejs/composable/use-speech-recognition";

const mounted = useMounted();
const { supported, listening, result, interimResult, toggle } = useSpeechRecognition({
  lang: "en-US",
  interimResults: true,
});
</script>

<template>
  <div class="composable-example">
    <p>Dictate a search query instead of typing it.</p>
    <button type="button" :disabled="!mounted || !supported" @click="() => toggle()">
      {{ listening ? "Stop listening" : "Start dictation" }}
    </button>
    <p>Heard: {{ result || interimResult || "…" }}</p>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? listening
            ? "Listening."
            : "Ready to listen."
          : "Speech recognition is not available in this browser."
    }}</output>
  </div>
</template>

Runtime contract

API

useSpeechRecognition

Transcribe speech with the Web Speech API. result accumulates the final transcript of the current session and interimResult the text still being recognized. Options are applied each time listening starts, so a reactive lang takes effect on the next start. Errors are normalized to a closed SpeechRecognitionErrorCode union and exposed through error rather than thrown. The recognizer is aborted and its listeners removed when the owning reactive scope stops. Server rendering: no recognizer is created; supported and listening are false and the transcripts are empty.

function useSpeechRecognition( options: UseSpeechRecognitionOptions = {}, ): SpeechRecognitionControls

const speech = useSpeechRecognition({ lang: "ja-JP" });
speech.start();
watch(speech.result, (text) => console.log(text));

Types

SpeechRecognitionAlternativeLike

One recognition hypothesis.

SpeechRecognitionResultLike

One recognition result: an array-like list of alternatives.

SpeechRecognitionResultListLike

Array-like list of every result of the current session.

SpeechRecognitionLike

Minimal SpeechRecognition instance consumed by useSpeechRecognition.

SpeechRecognitionFailure

Recognition failure reported by useSpeechRecognition.

UseSpeechRecognitionOptions

Options for useSpeechRecognition.

SpeechRecognitionControls

Reactive state and actions returned by useSpeechRecognition.