@feedlog-ai/vue 0.0.45 → 0.0.47

package/BUILD_FEEDLOG_CLIENT.md

@@ -0,0 +1,52 @@
+# Build with the top-level client (`@feedlog-ai/vue`)
+
+Use **`FeedlogIssuesClient`** when you want Vue bindings and the component performs fetching internally.
+
+## When to use
+
+- Vue 3 (or 2 with the patterns in the main README)
+- You do not need the initial HTML to already contain the issues array from your server (for that, see [BUILD_FEEDLOG_COMPOSABLE.md](./BUILD_FEEDLOG_COMPOSABLE.md))
+
+## Install
+
+```bash
+npm install @feedlog-ai/vue
+```
+
+## Minimal example (Vue 3, Composition API)
+
+```vue
+<template>
+  <FeedlogIssuesClient
+    api-key="your-api-key"
+    type="bug"
+    :limit="10"
+    theme="light"
+    max-width="42rem"
+    @feedlog-upvote="handleUpvote"
+    @feedlog-error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { FeedlogIssuesClient } from '@feedlog-ai/vue';
+
+const handleUpvote = (event: CustomEvent) => {
+  console.log('Issue upvoted:', event.detail);
+};
+
+const handleError = (event: CustomEvent) => {
+  console.error('Error:', event.detail);
+};
+</script>
+```
+
+## SSR / Nuxt
+
+Nuxt can server-render Stencil-based Vue components as Declarative Shadow DOM in many setups. See [README](./README.md#server-side-rendering-ssr).
+
+## See also
+
+- [README](./README.md) — Options API, Vue 2, global registration
+- [Build Your Own Feedlog hub](../../docs/BUILD_YOUR_OWN_FEEDLOG.md)
+- [Customize Feedlog styling](../../docs/CUSTOMIZE_FEEDLOG_STYLING.md)

package/BUILD_FEEDLOG_COMPOSABLE.md

@@ -0,0 +1,65 @@
+# Composable changelog (`@feedlog-ai/vue` + `@feedlog-ai/core`)
+
+Fetch with **`FeedlogSDK`**, then bind the **`issues`** array to **`FeedlogIssues`** (or compose **`FeedlogIssuesList`** / **`FeedlogIssue`** for individual cards).
+
+## When to use
+
+- You load data in **`async setup`**, route loaders, or server APIs and pass results into the template
+- You want the same data flow as React’s composable pattern, using Vue bindings instead of raw custom elements
+
+## Install
+
+```bash
+npm install @feedlog-ai/vue @feedlog-ai/core
+```
+
+## Client fetch (Vue 3)
+
+```vue
+<template>
+  <FeedlogIssues
+    v-if="issues.length"
+    :issues="issues"
+    theme="light"
+    max-width="42rem"
+    @feedlog-upvote="onUpvote"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { FeedlogIssues } from '@feedlog-ai/vue';
+import { FeedlogSDK, type FeedlogIssue } from '@feedlog-ai/core';
+
+const issues = ref<FeedlogIssue[]>([]);
+const sdk = new FeedlogSDK({ apiKey: import.meta.env.VITE_FEEDLOG_API_KEY });
+
+onMounted(async () => {
+  const res = await sdk.fetchIssues({ limit: 10 });
+  issues.value = res.issues;
+});
+
+async function onUpvote(event: CustomEvent<{ issueId: string }>) {
+  await sdk.toggleUpvote(event.detail.issueId);
+  const res = await sdk.fetchIssues({ limit: 10 });
+  issues.value = res.issues;
+}
+</script>
+```
+
+## Server-provided issues (sketch)
+
+If your framework passes serialized issues from the server (e.g. Nuxt `useAsyncData`), initialize `issues` from that payload instead of `onMounted` fetch, and keep `onUpvote` to sync with the API.
+
+## Finer composition
+
+- **`FeedlogIssuesList`** — list without outer section chrome
+- **`FeedlogIssue`** — single issue card; pass `:issue="item"`
+
+(Names match generated Vue exports; React uses `FeedlogIssueComponent` for the same element.)
+
+## See also
+
+- [@feedlog-ai/core README](../core/README.md)
+- [README](./README.md)
+- [Build Your Own Feedlog hub](../../docs/BUILD_YOUR_OWN_FEEDLOG.md)

package/README.md

@@ -307,6 +307,12 @@ If you're migrating from using web components directly:
 - Event names remain the same (kebab-case)
 - All props and events are properly typed
 
+## Build your own changelog
+
+- [Build Your Own Feedlog (hub)](../../docs/BUILD_YOUR_OWN_FEEDLOG.md) — three tiers and AI copy-paste blocks
+- [Top-level client](./BUILD_FEEDLOG_CLIENT.md) — `FeedlogIssuesClient`
+- [Composable + your data](./BUILD_FEEDLOG_COMPOSABLE.md) — `FeedlogSDK` + `FeedlogIssues`
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedlog-ai/vue",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "Vue bindings for Feedlog Toolkit Web Components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,7 +13,9 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "BUILD_FEEDLOG_CLIENT.md",
+    "BUILD_FEEDLOG_COMPOSABLE.md"
   ],
   "sideEffects": false,
   "scripts": {
@@ -28,7 +30,7 @@
     "vue": ">=3.0.0 || >=2.6.0"
   },
   "dependencies": {
-    "@feedlog-ai/webcomponents": "^0.0.45"
+    "@feedlog-ai/webcomponents": "^0.0.47"
   },
   "devDependencies": {
     "@jest/test-sequencer": "^29.7.0",