syncfusion-vue-speech-to-text

Q: How do I install syncfusion-vue-speech-to-text?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-speech-to-text in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-speech-to-text/ (personal) or .claude/skills/syncfusion-vue-speech-to-text/ (project).

by syncfusionFrontend & Design

Implement the Syncfusion Vue Speech-to-Text component. Instructions for integrating voice input, real-time transcription, language configuration, programmatic control, event handling, UI customization, browser compatibility, and security considerations for microphone-enabled applications.

Installs: 63
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-speech-to-text

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-vue-speech-to-text automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Syncfusion Vue Speech-to-Text Component

The Syncfusion Vue Speech-to-Text component converts spoken words into text using the browser's Speech Recognition API. This skill covers setup, configuration, event handling, customization, and security considerations for implementing real-time voice transcription in Vue 3 applications.

Browser Support & Requirements

The Speech-to-Text component requires:

Browser Support: Chrome 25+, Edge 79+, Safari 12+, Opera 30+ (Firefox not supported)
API Dependency: HTML5 Speech Recognition API
Internet Connection: Required for speech processing
User Permission: Microphone access consent

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Vue 3 project setup with Vite
Package installation and configuration
CSS theme imports
Component registration
Browser compatibility requirements

Speech Recognition & Configuration

📄 Read: references/speech-recognition.md

Retrieving transcribed text with transcript property
Setting language with lang property
Managing real-time results with allowInterimResults
Understanding listening states (Inactive, Listening, Stopped)
Showing/hiding tooltips with showTooltip
Disabling the component
Error handling and troubleshooting

Methods & Programmatic Control

📄 Read: references/methods.md

Starting speech recognition with startListening()
Stopping recognition with stopListening()
Programmatic control patterns and use cases

Events & Lifecycle

📄 Read: references/events.md

Component initialization with created event
Speech recognition lifecycle: onStart, onStop
Error detection with onError event
Real-time transcription with transcriptChanged event
Event argument structures and practical examples

Appearance & Customization

📄 Read: references/appearance.md

Customizing button text and content
Button icon configuration and positioning
Primary button styling
Tooltip content and positioning
CSS class styling (e-primary, e-outline, e-info, e-success, e-warning, e-danger)
Custom styling examples

Globalization & Localization

📄 Read: references/globalization.md

Localization with L10n.load() method
Translation key identifiers and default values
Language configuration with locale property
Right-to-Left (RTL) support with enableRtl property
Multi-language examples

Security Considerations

📄 Read: references/security.md

Online dependency and offline fallback
Data transmission security risks
Privacy concerns with third-party servers
Man-in-the-Middle (MITM) attack vectors
Mitigation strategies and best practices

Quick Start

Basic Setup with Composition API:

<template>
  <div id="container">
    <ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange"></ejs-speechtotext>
    <ejs-textarea v-model="textareaValue" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpeechToTextComponent as EjsSpeechtotext, TextAreaComponent as EjsTextarea } from "@syncfusion/ej2-vue-inputs";

const textareaValue = ref('');

const onTranscriptChange = (args) => {
  textareaValue.value = args.transcript;
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/speech-to-text/index.css";
</style>

Common Patterns

Pattern 1: Real-Time vs Final Transcription

Display results as the user speaks (interim results) or wait for complete speech:

<!-- Real-time results (default, allowInterimResults=true) -->
<ejs-speechtotext @transcript-changed="onTranscriptChange"></ejs-speechtotext>

<!-- Final results only (allowInterimResults=false) -->
<ejs-speechtotext @transcript-changed="onTranscriptChange" :allow-interim-results="false"></ejs-speechtotext>

Pattern 2: Multi-Language Support

Set language for speech recognition:

<!-- English (US) -->
<ejs-speechtotext lang="en-US" @transcript-changed="onTranscriptChange"></ejs-speechtotext>

<!-- French -->
<ejs-speechtotext lang="fr-FR" @transcript-changed="onTranscriptChange"></ejs-speechtotext>

Pattern 3: Programmatic Control

Trigger speech recognition from buttons:

<template>
  <div>
    <button @click="startRecognition">Start Listening</button>
    <button @click="stopRecognition">Stop Listening</button>
    <ejs-speechtotext ref="speechToTextInstance"></ejs-speechtotext>
  </div>
</template>

<script setup>
const speechToTextInstance = ref(null);

const startRecognition = () => {
  speechToTextInstance.value.startListening();
};

const stopRecognition = () => {
  speechToTextInstance.value.stopListening();
};
</script>

Pattern 4: Listening State Monitoring

Track component state changes:

<template>
  <div>
    <p>Status: {{ listeningState }}</p>
    <ejs-speechtotext @start="(args) => listeningState = args.listeningState" @stop="(args) => listeningState = args.listeningState"></ejs-speechtotext>
  </div>
</template>

<script setup>
const listeningState = ref('Inactive');
</script>

Pattern 5: Error Handling

Capture and respond to speech recognition errors:

<template>
  <ejs-speechtotext @error="onError"></ejs-speechtotext>
</template>

<script setup>
const onError = (args) => {
  console.error('Speech recognition error:', args);
};
</script>

FAQ

What does the syncfusion-vue-speech-to-text skill do?

How do I install syncfusion-vue-speech-to-text?

Run npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-speech-to-text in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-vue-speech-to-text/ (personal) or .claude/skills/syncfusion-vue-speech-to-text/ (project).

Which AI agents can use syncfusion-vue-speech-to-text?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-vue-speech-to-text safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-vue-speech-to-text?

It is published by syncfusion in syncfusion/vue-ui-components-skills. It has 63 recorded installs.