OvidijusParsiunas
commented
1 month ago Hi @admiral20.
I have experimented with Deep Chat in Nuxt quite a while back, but haven't had a chance to add it to the framework examples as I would inherently need to also update the example servers directory.
The trick is to render the component on the client side and not in the server itself. The reason for this is because Deep Chat uses a variety of global variables/APIs that are not available during server render time such as window and document, hence it needs to wait for its code to be interpreted in the browser.
In Nuxt, the way you can do this is by checking the process.client flag on the mounted lifecycle hook. Once this flag has passed, you can dynamically import Deep Chat and render it conditionally by using a data state variable such as isLoaded. Here is example code below:
<template>
<deep-chat
v-if="isLoaded"
:demo="true"
:textInput="{ placeholder: { text: 'Welcome to the demo!' } }"
:initialMessages="initialMessages"
/>
</template>
<script lang="ts">
export default {
async mounted() {
if (process.client) {
// dynamically import the component and conditionally render it via isLoaded when it has finished importing
await import('deep-chat');
this.isLoaded = true;
}
},
data() {
return {
initialMessages: [
{ role: 'user', text: 'Hey, how are you today?' },
{ role: 'ai', text: 'I am doing very well!' },
],
isLoaded: false,
};
},
};
</script>You can also find a live example for this here, however the link may change in the future when an official example will be added to the repo/documentation.
Let me know if this helps. Thanks!
IllamosSalaman
in nuxt3, i not use vue3 defineAsyncComponent API , the deep-chat error info:
navigator is not defined;after i use defineAsyncComponent API, the dom is not render;