Getting Started with Vue 3 Speech To Text

11 Aug 20267 minutes to read

This article provides a step-by-step guide for setting up a Vite project with a JavaScript environment and integrating the Syncfusion® Vue SpeechToText component using the Composition API / Options API.

The Composition API is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.

The Options API is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component’s properties and behavior. These options include data, methods, computed properties, watchers, lifecycle hooks, and more.

Prerequisites

Requirement Version
Vue 3.x
Node.js 16.0.0 or above

Vue supported versions

Vue version Minimum Syncfusion Vue Data SpeechToText version
Vue v2.7 20.3.47 and above
Vue v3.0 19.2.44 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Setup for local development

Easily set up a Vue 3 application using Vite, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools. For detailed steps, refer to the Vite installation instructions.

To create a new Vue 3 application, run one of the following commands based on your preferred language:

Vue with JavaScript

npm create vite@latest my-app -- --template vue

Vue with TypeScript

npm create vite@latest my-app -- --template vue-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 3] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Add Vue SpeechToText packages

To install the SpeechToText package, use the following command:

npm install @syncfusion/ej2-vue-inputs --save

or

yarn add @syncfusion/ej2-vue-inputs

Before including Syncfusion styles, make sure to remove the default styles defined in src/style.css. This helps prevent unintended style overrides and ensures that Syncfusion components render correctly.

Adding CSS reference

Themes for Syncfusion® Vue components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

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

Adding SpeechToText component

The SpeechToText code should be added in the src/App.vue file.

<script>
    import { SpeechToTextComponent  } from "@syncfusion/ej2-vue-inputs";

    export default {
        name: "App",
        components: {
        'ejs-speechtotext': SpeechToTextComponent
        }
    }
</script>
  1. Add the component definition in template section.
<template>
    <div style="margin: 50px auto;">
        <ejs-speechtotext id="speechtotext"></ejs-speechtotext>
    </div>
</template>

Here is the summarized code for the above steps in the src/App.vue file:

<template>
    <div style="margin: 50px auto;">
        <ejs-speechtotext id="speechtotext"></ejs-speechtotext>
    </div>
</template>

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

<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";
</style>
<template>
    <div style="margin: 50px auto;">
        <ejs-speechtotext id="speechtotext"></ejs-speechtotext>
    </div>
</template>

<script>
import { SpeechToTextComponent  } from "@syncfusion/ej2-vue-inputs";

export default {
    name: "App",
    components: {
    'ejs-speechtotext': SpeechToTextComponent
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";
</style>

The SpeechToText component requires an internet connection and browser support for the Speech Recognition API.

Run the application

npm run dev

or

yarn run dev

The output will appear as follows:

Output

Registering your Syncfusion license

Generate a license key from the Syncfusion License Dashboard and register it before rendering your Vue 3 application:

```javascript
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY');
```

Note: A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.

Troubleshooting

  • SpeechToText not rendering styles: Ensure the theme CSS is imported in src/App.vue and that any default Vite starter styles are not overriding the SpeechToText styles.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.

See also