vue-db

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.6.17
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

<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:

// 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>()
 { data, status } = (
   {
     (!userId.)  
     q
      .({ : todoCollection })
      .( (todo., userId.))
  },
  [userId],
)