stable
vue
Vue 3 composables — useNoydb, useCollection, useSync, useBlobURL — plus a NoydbPlugin and WebAuthn biometric unlock helpers.
@noy-db/in-vue·pnpm add @noy-db/hub @noy-db/to-browser-idb @noy-db/in-vueVue 3 composables for noy-db — works outside Nuxt too.
What it does
Installs as a Vue plugin (NoydbPlugin) that provides an already-constructed Noydb
instance to every component under its scope — the plugin takes the instance, not the ingredients
for one, so unlock and store choice stay in your own bootstrap code.
| composable | signature | returns |
|---|---|---|
useNoydb() | — | the injected Noydb |
useCollection<T>(db, compartmentName, collectionName) | explicit db | { data, loading, error, refresh }, all refs |
useSync(db, compartmentName) | explicit db | { status, syncing, push, pull, sync } |
useLiveQuery<R>(live) | a LiveQuery | reactive results |
useBlobURL<T>(collection, idGetter, options?) | — | Ref<string | null>, auto-revoking the ObjectURL |
useMigrationState(vaultName?) / (db, vaultName?) | — | reactive schema-cutover state |
NoydbKey is exported for inject(NoydbKey) where a composable does not fit.
Usage
// main.ts
import { createApp } from 'vue'
import { NoydbPlugin } from '@noy-db/in-vue'
import { createNoydb } from '@noy-db/hub'
import { toBrowserIdb } from '@noy-db/to-browser-idb'
const db = await createNoydb({
store: toBrowserIdb({ obfuscate: true }),
user: 'alice',
secret: 'a-strong-secret',
})
createApp(App).use(NoydbPlugin, { instance: db }).mount('#app')
NoydbPluginOptions is { instance } and nothing else, and createNoydb takes user,
not userId. Older material — including this package's own README before 0.7.0-pre.13 — showed
.use(NoydbPlugin, { adapter, userId }); none of those keys exists. An unknown option is dropped
silently rather than rejected, so the mistake surfaces later as an unset identity.<script setup lang="ts">
import { useCollection, useNoydb } from '@noy-db/in-vue'
const { data: items } = useCollection<Invoice>(useNoydb(), 'C101', 'invoices')
</script>
<template>
<li v-for="inv in items" :key="inv.id">{{ inv.customer }}: ฿{{ inv.amount }}</li>
</template>
See also
- in-* family
- pinia — store-shaped wrapper for the same composables
- nuxt — auto-imports these composables via a Nuxt module