How to make it work with Nuxt 3 ClientOnly mode?

[StanislavKozak]

How to use this plugin correctly? Everything was perfect with Vue 3, but after switching to Nuxt 3 I can't get the chat to work.

I get the warning "Avoid app logic that relies on enumerating keys on a component instance...", the page freezes, and the CPU heats up to 90+ degrees.

I tried to import directly on the page and create a plugin in /plugins - to no avail.

/plugin/vue-advanced-chat.js content: import VueAdvancedChat from 'vue-advanced-chat'; or import * as VueAdvancedChat from 'vue-advanced-chat';

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component("ChatModule", VueAdvancedChat); });

[DrakoPOD]

I had so many problems with this library and Nuxt, first I tried to create a plugin, it worked partially, for some reason the first load of the plugin fails and I need to reload the page, even adding .client to the page didn't worked. So, I ended put in in full client side.

onMounted(async () => {
  if (import.meta.server) {
    return; // This code should only run on the client side
  }
  const { register } = await import('vue-advanced-chat');
  register();
}

And wrapped it in client only

<template>
  <ClientOnly>
    <vue-advanced-chat/>
  </ClientOnly>
</template>