Frameworks
The following are links to live UI frameworks/libraries that can be used to implement Deep Chat.
![](/assets/images/reactLogo-c622f19c9471227dcd4152a28afc40ad.png)
React
Make sure to use the deep-chat-react
package and define the element tag as DeepChat
.
Click for Live Example
Click for GitHub
Vue
Depending on your configuration, you may notice a "Failed to resolve component..." warning in the console. This can be fixed by following the simple steps outlined here.
Click for Live Example - Vue 3
Click for Live Example - Vue 2
![](/assets/images/svelteLogo-58bc2f231d79b09f68d503ec3fe5228f.png)
Svelte
The Svelte browser app should work right out of the box. The SvelteKit implementation requires the component to be imported using onMount
and
deep-chat
to be rendered when it has loaded.
Click for Live Example - Svelte
Click for Live Example - SvelteKit
Angular
Please add the CUSTOM_ELEMENTS_SCHEMA
into your module's schemas
array and import the component
as import 'deep-chat';
. See this blog for more information.
![](/assets/images/solidLogo-b5069c3b4351b62d70edc786bc9ed123.png)
Solid
Make sure to declare a solid-js
module when working with TypeScript and use hyphen-case syntax for properties that are accessed directly through markup.
Next
Use the deep-chat-react
package and lazy load it using Next's dynamic
extension.
When using App Router - make sure to set "use client"
at the top of your file.
Click for Live Example - App Router
Click for Live Example - Pages Router
Click for GitHub
![](/assets/images/nuxtLogo-dbed17702e291e3f05999549d9e4691d.png)
Nuxt
Make sure to import deep-chat
dynamically using await import
along with the process.client
check.
![](/assets/images/vanillaJSLogo-266bd9fb2663dcc057b43c239a73e01b.png)
Vanilla JS
The Live Example demonstrates how to set values via properties (recommended) and attributes, which should also be used as a fallback approach for other frameworks. This example also demonstrates how to import the component via a CDN.
Troubleshooting
If your platform has not been listed and Vanilla JS approach does not work as fallback, or if you are having issues with any of the existing examples; please see github issues or create a new issue ticket and we will look into it as soon as possible.