@tanstack/vue-db 0.0.107 → 0.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-db",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "description": "Vue integration for @tanstack/db",
   "author": "Kyle Mathews",
   "license": "MIT",
@@ -35,16 +35,17 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "skills"
   ],
   "dependencies": {
-    "@tanstack/db": "0.5.30"
+    "@tanstack/db": "0.5.31"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@electric-sql/client": "^1.5.8",
+    "@electric-sql/client": "^1.5.12",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/coverage-istanbul": "^3.2.4",
     "vue": "^3.5.28"

package/skills/vue-db/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: vue-db
+description: >
+  Vue 3 bindings for TanStack DB. useLiveQuery composable with
+  MaybeRefOrGetter query functions, ComputedRef return values for all fields
+  (data, state, collection, status, isLoading, isReady, isError).
+  Dependency arrays with Vue refs. Conditional queries via returning
+  undefined/null. Pre-created collection support via ref or getter.
+  Import from @tanstack/vue-db (re-exports all of @tanstack/db).
+type: framework
+library: db
+framework: vue
+library_version: '0.5.30'
+requires:
+  - db-core
+sources:
+  - 'TanStack/db:docs/framework/vue/overview.md'
+  - 'TanStack/db:packages/vue-db/src/useLiveQuery.ts'
+---
+
+This skill builds on db-core. Read it first for collection setup, query builder, and mutation patterns.
+
+# TanStack DB — Vue
+
+## Setup
+
+```vue
+<script setup lang="ts">
+import { useLiveQuery, eq, not } from '@tanstack/vue-db'
+
+const { data: todos, isLoading } = useLiveQuery((q) =>
+  q
+    .from({ todo: todoCollection })
+    .where(({ todo }) => not(todo.completed))
+    .orderBy(({ todo }) => todo.created_at, 'asc'),
+)
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <ul v-else>
+    <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
+  </ul>
+</template>
+```
+
+`@tanstack/vue-db` re-exports everything from `@tanstack/db`.
+
+## Hook
+
+### useLiveQuery
+
+All return values are `ComputedRef`:
+
+```ts
+// Query function with reactive deps
+const minPriority = ref(5)
+const { data, isLoading, isReady, status } = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => gt(todo.priority, minPriority.value)),
+  [minPriority],
+)
+
+// Config object
+const { data } = useLiveQuery({
+  query: (q) => q.from({ todo: todoCollection }),
+  gcTime: 60000,
+})
+
+// Pre-created collection (reactive via ref)
+const { data } = useLiveQuery(preloadedCollection)
+
+// Conditional query
+const userId = ref<number | null>(null)
+const { data, status } = useLiveQuery(
+  (q) => {
+    if (!userId.value) return undefined
+    return q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.userId, userId.value))
+  },
+  [userId],
+)
+```
+
+## Vue-Specific Patterns
+
+### Reactive dependencies with refs
+
+```ts
+const filter = ref('active')
+const { data } = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.status, filter.value)),
+  [filter],
+)
+// Query re-runs when filter.value changes
+```
+
+### Mutations in event handlers
+
+```ts
+const handleToggle = (id: number) => {
+  todoCollection.update(id, (draft) => {
+    draft.completed = !draft.completed
+  })
+}
+```
+
+## Common Mistakes
+
+### CRITICAL Missing reactive deps in dependency array
+
+Wrong:
+
+```ts
+const userId = ref(1)
+const { data } = useLiveQuery((q) =>
+  q
+    .from({ todo: todoCollection })
+    .where(({ todo }) => eq(todo.userId, userId.value)),
+)
+```
+
+Correct:
+
+```ts
+const userId = ref(1)
+const { data } = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.userId, userId.value)),
+  [userId],
+)
+```
+
+Reactive refs used in the query must be included in the deps array for the query to re-run on changes.
+
+Source: docs/framework/vue/overview.md
+
+See also: db-core/live-queries/SKILL.md — for query builder API.
+
+See also: db-core/mutations-optimistic/SKILL.md — for mutation patterns.