feat: examples chatwoot-nuxt

README.md

@@ -4,6 +4,10 @@ This repo was created with the aim of developing the vue ecosystem as well as gi
 
 As a sponsor, you can support us and our software that we have developed on books.
 
+## Docs
+[Website and Docs](https://opensource.huntersofbook.com)
+
+
 ## Packages Vue 3
 
 | Package                                           | README (click for read me)                                                                                                       |
@@ -13,10 +17,12 @@ As a sponsor, you can support us and our software that we have developed on book
 | [@huntersofbook/form-naiveui](packages/form-naiveui)                             | [![@huntersofbook/form-naiveui version](https://img.shields.io/npm/v/@huntersofbook/form-naiveui.svg?label=%20)](packages/form-naiveui/README.md)                                       |
 | [@huntersofbook/auth-vue](packages/auth-vue)                             | [![@huntersofbook/auth-vue version](https://img.shields.io/npm/v/@huntersofbook/auth-vue.svg?label=%20)](packages/auth-vue/README.md)                                       |
 | [@huntersofbook/ui](packages/ui)                             | [![@huntersofbook/ui version](https://img.shields.io/npm/v/@huntersofbook/ui.svg?label=%20)](packages/ui/README.md)                                       |
+[@huntersofbook/chatwoot-vue](packages/chatwoot-vue)                             | [![@huntersofbook/chatwoot-vue version](https://img.shields.io/npm/v/@huntersofbook/chatwoot-vue.svg?label=%20)](packages/chatwoot-vue/README.md)                                       |
 
 ## Packages Nuxt 3
 
 | Package                                           | README (click for read me)                                                                                                       |
 | ------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
 | [@huntersofbook/plausible-nuxt](packages/plausible-nuxt)                             | [![@huntersofbook/plausible-nuxt version](https://img.shields.io/npm/v/@huntersofbook/plausible-nuxt.svg?label=%20)](packages/plausible-nuxt/README.md)                                       |
-| [@huntersofbook/naive-ui-nuxt](packages/naive-ui-nuxt)                             | [![@huntersofbook/naive-ui-nuxt version](https://img.shields.io/npm/v/@huntersofbook/naive-ui-nuxt.svg?label=%20)](packages/naive-ui-nuxt/README.md)                                       |
+| [@huntersofbook/naive-ui-nuxt](packages/naive-ui-nuxt)                             | [![@huntersofbook/naive-ui-nuxt version](https://img.shields.io/npm/v/@huntersofbook/naive-ui-nuxt.svg?label=%20)](packages/naive-ui-nuxt/README.md)                                       |
+[@huntersofbook//chatwoot-nuxt](packages/chatwoot-nuxt)                             | [![@huntersofbook/chatwoot-nuxt version](https://img.shields.io/npm/v/@huntersofbook/chatwoot-nuxt.svg?label=%20)](packages//chatwoot-nuxt/README.md)                                       |

docs/content/5.examples/1.nuxt/1.chatwoot.md

@@ -0,0 +1,13 @@
+---
+head.title: 'Chatwoot | Nuxt 3 Examples'
+---
+
+# Chatwoot
+
+Chatwoot Minimal example of using Nuxt 3.
+
+::ReadMore{link="/guide/nuxt-packages/chatwoot"}
+::
+
+::sandbox{repo="huntersofbook/huntersofbook" branch="main" dir="examples/nuxt/chatwoot" file="app.vue"}
+::

examples/nuxt/chatwoot/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

examples/nuxt/chatwoot/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.

examples/nuxt/chatwoot/app.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const {
+  isModalVisible,
+  toggle,
+  toggleBubbleVisibility,
+  popoutChatWindow,
+  ...more
+} = useChatWoot()
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-4xl mt-20">
+    <div class="grid gap-10 grid-cols-3">
+      <div class="col-span-full bg-gray-200 p-4">
+        isModalVisible: <span class="font-black"> {{ isModalVisible }}</span>
+      </div>
+      <HButton @click="toggle('open')">toggle open</HButton>
+      <HButton @click="toggle('close')">toggle close</HButton>
+
+      <HButton @click="toggleBubbleVisibility('hide')"
+        >toggleBubbleVisibility-hide</HButton
+      >
+      <HButton @click="toggleBubbleVisibility('show')"
+        >toggleBubbleVisibility-show</HButton
+      >
+      <HButton @click="popoutChatWindow()">popoutChatWindow</HButton>
+    </div>
+  </div>
+</template>

examples/nuxt/chatwoot/components/HButton.vue

@@ -0,0 +1,9 @@
+<template>
+  <button
+    v-bind="$attrs"
+    type="button"
+    class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+  >
+    <slot />
+  </button>
+</template>

examples/nuxt/chatwoot/nuxt.config.ts

@@ -0,0 +1,16 @@
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@huntersofbook/chatwoot-nuxt', '@nuxtjs/tailwindcss'],
+
+  huntersofbookChatwoot: {
+    init: {
+      websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
+    },
+    settings: {
+      locale: 'en',
+      position: 'left',
+      launcherTitle: 'Hello Chat'
+      // ... and more settings
+    }
+  }
+})

examples/nuxt/chatwoot/package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "HOST=0.0.0.0 nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^5.3.3",
+    "nuxt": "^3.0.0-rc.11"
+  },
+  "dependencies": {
+    "@huntersofbook/chatwoot-nuxt": "^0.2.0"
+  }
+}

examples/nuxt/chatwoot/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}