{"_id":"@aichatbot-saas/vue","name":"@aichatbot-saas/vue","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aichatbot-saas/vue","version":"0.1.0","description":"Native in-page Vue 3 chat UI component for the AIChatbot SaaS — a thin, themeable binding over @aichatbot-saas/core.","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/piyushshri01/chat-bot-saas.git","directory":"sdks/vue"},"homepage":"https://github.com/piyushshri01/chat-bot-saas/tree/main/sdks/vue#readme","bugs":{"url":"https://github.com/piyushshri01/chat-bot-saas/issues"},"keywords":["vue","vue3","nuxt","chatbot","ai","chat","sdk","aichatbot","support","widget","embeddable"],"scripts":{"build":"tsup src/index.ts --format esm,cjs --dts --clean --external vue,@aichatbot-saas/core","typecheck":"tsc --noEmit"},"dependencies":{"@aichatbot-saas/core":"^0.1.0"},"peerDependencies":{"vue":">=3.2"},"devDependencies":{"tsup":"^8.0.0","typescript":"^5.4.0","vue":"^3.4.0"},"publishConfig":{"access":"public"},"_id":"@aichatbot-saas/vue@0.1.0","gitHead":"e36cb372535432e87de61da448f13bf232ac9753","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-N0zzWAGq9ogvCRueRddqVG6dFNgV8Pfbi0fGH5+LaCWRqmu/jfcxFIShSXMvV8/UrnkPM54f28TrFDyBV5V4PA==","shasum":"768b1136307ea764d5055caf4bd8d16680a3a949","tarball":"https://registry.npmjs.org/@aichatbot-saas/vue/-/vue-0.1.0.tgz","fileCount":10,"unpackedSize":48518,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGg29AyM6/ymoKV8V+9qsLGIEkkBU9knnxKRBrU+8H0LAiBjq80NEFBqsKPReNYEojut39mn3x8wRNZju+HPHTAHFA=="}]},"_npmUser":{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"},"directories":{},"maintainers":[{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.1.0_1783318809382_0.7649833249667655"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-06T06:20:09.210Z","0.1.0":"2026-07-06T06:20:09.532Z","modified":"2026-07-06T06:20:09.772Z"},"maintainers":[{"name":"piyushshri01","email":"piyushshrimal94@gmail.com"}],"description":"Native in-page Vue 3 chat UI component for the AIChatbot SaaS — a thin, themeable binding over @aichatbot-saas/core.","homepage":"https://github.com/piyushshri01/chat-bot-saas/tree/main/sdks/vue#readme","keywords":["vue","vue3","nuxt","chatbot","ai","chat","sdk","aichatbot","support","widget","embeddable"],"repository":{"type":"git","url":"git+https://github.com/piyushshri01/chat-bot-saas.git","directory":"sdks/vue"},"bugs":{"url":"https://github.com/piyushshri01/chat-bot-saas/issues"},"license":"MIT","readme":"# @aichatbot-saas/vue\n\nNative in-page **Vue 3** chat UI component for the [AIChatbot](https://github.com/piyushshri01/chat-bot-saas) SaaS.\n\nUnlike the drop-in `chatbot.js` floating bubble, this is a real Vue component that\nrenders native DOM inline in your page and talks to the REST API directly. It is a\nthin, themeable binding over the headless [`@aichatbot-saas/core`](../web-core) —\nthe core owns all behavior (config loading, greeting, suggestions, send flow,\nconversation persistence, feedback, error handling); this package just renders its\nstate.\n\n- Composition API, strict TypeScript, ships compiled ESM + CJS + `.d.ts`.\n- Written with a render function (no `.vue` SFC) — no template compiler required.\n- **Inline styles only** — no global CSS, no UI dependency. Every color and radius\n  comes from the resolved `ChatTheme`.\n- **SSR-safe** (Nuxt friendly): browser globals are only touched inside lifecycle\n  hooks, so importing the component on the server does not crash.\n\n## Install\n\n```bash\nnpm install @aichatbot-saas/vue\n# pulls in @aichatbot-saas/core automatically (declared dependency)\n# vue >=3.2 is a peer dependency you already have in a Vue app\n```\n\n## Usage\n\nThe component fills its container, so render it inside a sized element.\n\n```vue\n<script setup lang=\"ts\">\nimport { AIChatbot } from '@aichatbot-saas/vue';\n</script>\n\n<template>\n  <div style=\"width: 380px; height: 560px;\">\n    <AIChatbot api-key=\"pk_live_xxx\" api-url=\"https://api.you.com\" />\n  </div>\n</template>\n```\n\nOr register it globally:\n\n```ts\nimport { createApp } from 'vue';\nimport { AIChatbot } from '@aichatbot-saas/vue';\n\nconst app = createApp(App);\napp.component('AIChatbot', AIChatbot);\n```\n\nOnly `apiKey` is required — bot name, greeting, suggestions, languages and theme\nare fetched from your backend on mount.\n\n## Props\n\n| Prop        | Attribute (kebab) | Type                  | Required | Description |\n|-------------|-------------------|-----------------------|----------|-------------|\n| `apiKey`    | `api-key`         | `string`              | yes      | Publishable API key (`pk_live_...`). |\n| `apiUrl`    | `api-url`         | `string`              | no       | Backend base URL. Defaults to same-origin. |\n| `language`  | `language`        | `string`              | no       | Force a language. Otherwise `config.languages[0]` → `\"en\"`. |\n| `theme`     | `:theme`          | `Partial<ChatTheme>`  | no       | Local theme overrides (highest precedence). |\n| `sessionId` | `session-id`      | `string`              | no       | Stable device/session id forwarded to the backend for threading. |\n\n## Theming\n\nTheme precedence is **client override → backend config → built-in default**. Pass a\npartial `ChatTheme` to force any token locally even if the backend says otherwise:\n\n```vue\n<script setup lang=\"ts\">\nimport { AIChatbot, type ChatTheme } from '@aichatbot-saas/vue';\n\nconst theme: Partial<ChatTheme> = {\n  primaryColor: '#7c3aed',\n  bubbleRadius: 18,\n  fontFamily: 'Inter, system-ui, sans-serif',\n};\n</script>\n\n<template>\n  <div style=\"width: 100%; height: 600px;\">\n    <AIChatbot api-key=\"pk_live_xxx\" api-url=\"https://api.you.com\" :theme=\"theme\" />\n  </div>\n</template>\n```\n\nAvailable tokens: `primaryColor`, `secondaryColor`, `onPrimaryColor`,\n`backgroundColor`, `surfaceColor`, `botBubbleColor`, `botBubbleTextColor`,\n`botBubbleBorderColor`, `userBubbleColor`, `userBubbleTextColor`, `mutedTextColor`,\n`bubbleRadius` (px), `inputRadius` (px), `fontFamily`.\n\n## Inline & embeddable\n\nThe component renders a flex column that fills `width: 100%; height: 100%` of its\nparent — drop it into a sidebar, a modal, a support page, or a fixed-position panel.\nThere is no floating launcher; you control placement.\n\n## SSR / Nuxt\n\nSafe to import and render on the server. All network and DOM work happens in\n`onMounted` / `onBeforeUnmount`, and styling is fully inline, so there is no\nhydration mismatch and no `window`/`document` access during SSR. In Nuxt you can use\nit directly in a page or wrap it in `<ClientOnly>` if you prefer to skip server\nrender entirely.\n\n## Advanced: headless client\n\nFor custom UIs you can use the REST client directly (re-exported from the core):\n\n```ts\nimport { AIChatbotClient } from '@aichatbot-saas/vue';\n\nconst client = new AIChatbotClient({ apiKey: 'pk_live_xxx', apiUrl: 'https://api.you.com' });\nconst config = await client.fetchConfig();\nconst reply = await client.sendMessage({ text: 'hi', conversationId: null, language: 'en' });\n```\n\n## License\n\nMIT © 2026 AIChatbot\n","readmeFilename":"README.md","_rev":"1-f58d41bdd10a11e206417ba9bbdc5284"}