Chat.vue

// js/components/Chat.vue

<script>
  import { StreamChat } from 'stream-chat';
    export default {
        data() {
            return {
                modal: {
                    show: false,
                },
                message: '',
                messageData: [],
                collapsed: false,
                channel: null
            }
        },
        computed: {
           username() {
                return "client"
           }
        },
        mounted() {
          this.initializeClient();
          this.createChannel();
        },
        methods: {
            async createChannel(){
            const {data} = await axios.post('/getChannel', {
                from_username: "client",
                to_username: "admin",
                from: "client",
                to: "admin",
            })
            const channel = this.client.channel('messaging', data.channel, {
                name: 'LiveChat channel',
                members: ["client", "admin"]
            });
            this.channel = channel
            channel.watch().then(state => {
                channel.on('message.new', event => {
                    this.messageData.push(event.message)
                });
             })
            },
            async initializeClient () {

            const {data} = await axios.post('/generate-token', {
                name: "client"
            })
            const client = new StreamChat(process.env.MIX_STREAM_API_KEY);
            await client.setUser(
                {
                    id: "client",
                    name: "client",
                },
                    data.token,
            );
               this.client = client
            },
            sendMessage() {
                this.channel && this.channel.sendMessage({
                    text: this.message
                });
                this.message = "";
            },
            toggleModal() {
                this.modal.show = !this.modal.show;
            },
            showModal() {
                this.modal.show = true;
            },
            hideModal() {
                this.modal.show = false;
            },
        }
    }
</script>