Web Client (Vue3)

Build voice experiences and chatbots for the web. This frontend client brings your Jovo app to websites and web apps with Vue.js 3.

Jovo Clients help with two tasks:

• Record user input (speech, text, buttons) and send it as a request to the Jovo app (where the Web Platform handles the conversational logic).
• Handle the response from the Jovo app and play/show output to the user.

The Jovo Web Client can be used on websites and web apps. This is the version for clients build with the popular framework Vue.js, version 3. You can also find a version for Vue2 and a vanilla JavaScript client.

Install the client package:

$ npm install @jovotech/client-web-vue3

You can add the client to your Vue app like this:

import JovoWebClientVue, { JovoWebClientVueConfig } from '@jovotech/client-web-vue3';
import Vue from 'vue';
// ...

Vue.use<JovoWebClientVueConfig>(JovoWebClientVue, {
  endpointUrl: 'http://localhost:3000/webhook',
  config: {
    // Configuration
});

The constructor accepts two parameters:

• endpointUrl: For local development of your Jovo app with Express, you can use http://localhost:3000/webhook.
• config: Learn more in the vanilla JS client docs.

The Vue client offers the same features as the vanilla JavaScript client. You can find all features and configurations in its documentation.

The Vue client enhances the experience by adding a $client property to your Vue app, which makes it possible to reference it across all Vue components.

this.$client;

Known issue: It seems like it is impossible to attach reactive data to Vue 3 from a plugin. This means that compared to the Vue 2 variant, this will require workarounds to use properties of the client. Another solution would be to add the client to the data of the root component and provide it from there. This would fix the reactivity issue.