added chat code as plugin for client rendering

This commit is contained in:
Markus 2023-07-04 21:42:14 +02:00
parent 932ad7037f
commit 708c769a3b
3 changed files with 33 additions and 29 deletions

View File

@ -127,6 +127,7 @@ export default {
{ src: '~/plugins/vue-infinite-loading.js', ssr: false },
{ src: '~/plugins/vue-observe-visibility.js', ssr: false },
{ src: '~/plugins/v-mapbox.js', mode: 'client' },
{ src: '~/plugins/vue-advanced-chat.js', mode: 'client' },
],
router: {

View File

@ -1,34 +1,30 @@
<script setup>
import { register } from 'vue-advanced-chat'
register()
// import { register } from 'vue-advanced-chat/dist/vue-advanced-chat.es.js'
// window['vue-advanced-chat'].register()
</script>
<template>
<div>
<internal-page :pageParams="pageParams" />
<vue-advanced-chat
:current-user-id="currentUserId"
:template-actions="JSON.stringify(templatesText)"
:text-messages="JSON.stringify(textMessages)"
:menu-actions="JSON.stringify(menuActions)"
:rooms="JSON.stringify(rooms)"
:messages="JSON.stringify(messages)"
:room-actions="JSON.stringify(roomActions)"
:rooms-loaded="true"
show-files="false"
show-audio="false"
:show-footer="true"
:messages-loaded="messagesLoaded"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
:theme="theme"
:is-device="isDevice"
@show-demo-options="showDemoOptions = $event"
/>
<base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
change style mode
</base-button>
<client-only>
<internal-page :pageParams="pageParams" />
<vue-advanced-chat
:current-user-id="currentUserId"
:template-actions="JSON.stringify(templatesText)"
:text-messages="JSON.stringify(textMessages)"
:menu-actions="JSON.stringify(menuActions)"
:rooms="JSON.stringify(rooms)"
:messages="JSON.stringify(messages)"
:room-actions="JSON.stringify(roomActions)"
:rooms-loaded="true"
show-files="false"
show-audio="false"
:show-footer="true"
:messages-loaded="messagesLoaded"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
:theme="theme"
:is-device="isDevice"
@show-demo-options="showDemoOptions = $event"
/>
<base-button @click="theme = theme === 'light' ? 'dark' : 'light'">
change style mode
</base-button>
</client-only>
</div>
</template>

View File

@ -0,0 +1,7 @@
import { register } from 'vue-advanced-chat'
export default ({ app }) => {
if(process.client){
register()
}
}