Botframework-webchat: Any plans to make it available as a Vue component?

[qdoop]

[danmarshall]

Hi @qdoop we don't specifically have plans to do this, but we would be open to accepting contributions from the community. Does Vue work well with React?

[billba]

Vue is as different from React as Angular. It would be interesting to spin up WebChat-Vue (and/or WebChat-Angular) and see how much code it shares with the current React version of WebChat. It certainly take a very motivated party who understands both React and one of the other libraries.

Personal theory: shared code would be limited to DirectLineJS and style sheets.

[Wenish]

i know its closed.
But if someone wants an easy solution for vue.

npm install botframework-webchat --save

then create a vue component like this:

create a folder in your components folder called WebChat.

after that create those files in the folder

index.vue

<template src="./WebChat.component.html"></template>
<script src="./WebChat.component.js"></script>
<style src="./WebChat.component.css" scoped lang="css"></style>

WebChat.component.js

import { App } from 'botframework-webchat'
import 'botframework-webchat/botchat.css'

export default {
  name: 'web-chat',
  components: { },
  props: ['directLineSecret'],
  data () {
    return {

    }
  },
  computed: {

  },
  mounted () {
    console.log(this.directLineSecret)
    App({
        directLine: { secret: this.directLineSecret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("botframework-chat"))
  },
  methods: {

  }
}

WebChat.component.html

<section class="web-chat">
  <div id="botframework-chat"/>
</section>

WebChat.component.css

.web-chat{
  position: absolute;
  width: 100%;
  height: 100%;
}

Thats all u need for the component.
Now u can use the component.
Dont forget to pass the directLineSecret

usage example:

<section class="page-home">
  <WebChat direct-line-secret="yourSecret_3g9h459gb4etrvo8e4bter4tb"/>
</section>

[ziad-akiki]

@Wenish Doesn't work with the latest version

[biohazard999]

@ziad-akiki I wrote a blog post about this topic the idea is to use vuera to include it. Works fine in production for me.