React + Jovo Web Component

#1

I am trying to implement Jovo’s Vue Chat Widget into our React website. However, I am getting an error from the Vue CLI whenever I try to build the vue components as web components to be imported into my React app.

Has anyone been able to use Jovo’s Web Components in ReactJS?

Does anyone have advice on:

  1. How to build Jovo’s Vue components as Web Components using Vue CLI?
  2. How to build Jovo’s Web Components into React?

I have tried using Vue component as a Web Component in React.

I generate the Web Component for the ChatWidget.vue component like this:
vue build --target wc --name Chat-Widget src/components/ChatWidget.vue

My console outputs the following error:
You may need an additional loader to handle the result of these loaders.

image
image.png1316×618 82.3 KB

Does anyone have advice on:

  1. How to build Jovo’s Vue components as Web Components using Vue CLI?
  2. How to build Jovo’s Web Components into React?
#2

Hello there,

the building as a web-component works fine for me with the snippet you provided but has some disadvantages that might not be obvious at first glance.

As stated in the Vue CLI-docs it is assumed that the entry should be a .vue-file and that’s where the problem emerges. In main.ts the JovoWebClientVue-plugin is included and this is then skipped when building as a web-component. Therefore $client is not set and undefined.

A workaround would be to initialize and set $client in the entry .vue-file, but we’ve already created an example of how a client could be implemented in React here. It’s not the ChatWidget but you can get an idea of how it works in React.

If you still have questions, just let me know.

Edit: If you want to use the web-components do the following:

  1. Change the build-script to the following: vue-cli-service build --target wc --name Chat-Widget src/App.vue
  2. Add the following method to App.vue:
  created() {
    Vue.use<JovoWebClientVueConfig>(JovoWebClientVue, {
      url: process.env.VUE_APP_CLIENT_ENDPOINT_URL || 'http://localhost:3000/webhook',
      client: {
        audioPlayer: {
          enabled: false,
        },
        speechSynthesizer: {
          enabled: false,
        },
        repromptHandler: {
          enabled: false,
        },
      },
    });
  }