livechat/chat-widget-adapters

Can't apply it on vue 2

kid-github opened this issue · 3 comments

kid-github commented

Describe the bug
I'm using Vue 2 as my framework and the livechat widget guide seems to not working

To Reproduce
Steps to reproduce the behavior:

  1. I Use Provided Code from the website to my index ( before tag, as instructed) and it doesnt do anything to my website
    image

  2. Then i use this page's direction to Place the code on the app.vue and it's still not working
    image
    image

My website still show nothing

Version : Vue 2.6.12

walaszczykm commented

Hello @kid-github 👋

As stated in the @livechat/widget-vue package README:

This library allows to render and interact with the LiveChat Chat Widget inside a Vue 3 application.

It can also be seen from peer dependencies in package.json:

chat-widget-adapters/packages/widget-vue/package.json

Line 32 in 832c5ca

"vue": "3"

This means that we currently support only Vue 3 applications. Vue 3 is currently the main supported version of the library. We may enhance support for the LiveChatWidegt component to Vue 2 but it will not be a high priority for us at the moment. Hooks exported from the package will not be compatible with Vue 2 as they are based on the Compistion API introduced in the Vue 3.

From your screenshot, I can see that in the first place you have used our Chat Widget snippet code directly in your HTML document. This way of integrating Chat Widget with your website is not directly a topic of this project and it should work out of the box for every website. You can read more about it here: https://www.livechat.com/help/setting-up-livechat-on-your-website/.

Could you please provide more details about the issue on your website by embedding the Chat Widget directly in the HTML?

walaszczykm commented

Hello, @kid-github once again 👋

I have looked into this issue and analyzed the reasons for incompatibility. Although the lack of support for the new Composition API is obvious as this is a Vue 3 specific feature, the main LiveChatWidget component looked like it could work on both Vue 2 and Vue 3. As long as the component is defined using Options API and not Composition API it will work on both Vue 2 and 3. And indeed it was defined like that but for rich TypeScript support in Vue 3 apps, the component is defined using defineComponent function imported from vue@3 package. This couldn’t work in-app using Vue 2 and missing Vue 3 package. But as usage of this function is not required for runtime in Vue 2 I was able to create a dedicated build pipeline and export this component as plain object export under dedicated submodule @livechat/widget-vue/v2. From my tests, it looks that it indeed now works properly on both Vue 2 and Vue 3 apps 🙂

You can look into a PR for more information and implementation details: #28

walaszczykm commented

The PR was merged. Changes will be available with the next released version 🙂