2.0.0: Web component migration

Fully migrate the library to web component, so it can be used the same way on Vue 2, Vue 3, React, Angular and any other framework, or with not framework at all.

For more information, please read the official documentation Vue and Web Components.

MIGRATION GUIDE

Usage

• Import and use the web component like this:

import { register } from 'vue-advanced-chat'
register()

• Register vue-advanced-chat as a web component in your config file:

compilerOptions: {
  isCustomElement: tagName => tagName === 'vue-advanced-chat'
}

Shadow DOM

CSS classes cannot be simply overridden anymore. You can still use CSS variables, and if needed you can override CSS classes like this:

const style = document.createElement('style')
style.innerHTML = styles
this.$refs.chatWindow.shadowRoot.appendChild(style)

Props

For array and object props, you need to pass it as strings, for example: [messages]="JSON.stringify(messages)

Some props typing have changed:

• current-user-id and room-id props must be strings
• roomId, typingUsers and user._id in rooms prop must be strings
• senderId in messages prop must be a string
• senderId is rooms.lastMessage must be a string

Events

You can get events params like this:

@fetch-messages="fetchMessages($event.detail[0])"

Slots

As this library is now using native web component slots, some slots were renamed and the usage changed in some cases.
For the full list of available slots, please refer to https://github.com/antoine92190/vue-advanced-chat#named-slots