Web component migration

[antoine92190]

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.

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

• 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

• deleted-icon: deleted data was removed
• spinner-icon: show and infinite data were removed