novadb-vue

Vue 3 composables and plugin for NovaDB — the high-performance embeddable Rust database.

Install

npm install novadb-vue novadb-rs

Setup — install the plugin

// main.ts
import { createApp } from 'vue'
import { createNovaDB } from 'novadb-vue'
import { NovaDb } from 'novadb-rs'
import App from './App.vue'

const app = createApp(App)

app.use(createNovaDB(() => NovaDb.inMemory()))

app.mount('#app')

useQuery — reactive reads

<script setup lang="ts">
import { useQuery } from 'novadb-vue'

interface User { _id: string; name: string; age: number }

const { data: users, loading, error, refresh } = useQuery<User[]>(
  async (db) => db.collection('users').find({}),
  { immediate: true }   // run on mount
)
</script>

<template>
  <div>
    <button @click="refresh">Refresh</button>
    <p v-if="loading">Loading…</p>
    <p v-if="error">{{ error.message }}</p>
    <ul v-else>
      <li v-for="user in users" :key="user._id">
        {{ user.name }} — {{ user.age }}
      </li>
    </ul>
  </div>
</template>

useMutation — writes

<script setup lang="ts">
import { ref } from 'vue'
import { useMutation } from 'novadb-vue'

const name = ref('')

const { mutate: addUser, loading } = useMutation(
  async (db, name: string) =>
    db.collection('users').insert({ name, age: 0, createdAt: Date.now() })
)
</script>

<template>
  <div>
    <input v-model="name" placeholder="Name" />
    <button @click="addUser(name)" :disabled="loading">
      {{ loading ? 'Saving…' : 'Add User' }}
    </button>
  </div>
</template>

Full CRUD example

<script setup lang="ts">
import { ref } from 'vue'
import { useQuery, useMutation } from 'novadb-vue'

interface User { _id: string; name: string }

const newName = ref('')

const { data: users = [], loading, refresh } = useQuery<User[]>(
  db => db.collection('users').find({}),
  { immediate: true }
)

const { mutate: add } = useMutation(async (db, name: string) => {
  await db.collection('users').insert({ name })
  refresh()
})

const { mutate: remove } = useMutation(async (db, id: string) => {
  await db.collection('users').deleteOne({ _id: id })
  refresh()
})
</script>

<template>
  <div>
    <input v-model="newName" placeholder="New user name" />
    <button @click="add(newName)">Add</button>

    <p v-if="loading">Loading…</p>
    <ul v-else>
      <li v-for="u in users" :key="u._id">
        {{ u.name }}
        <button @click="remove(u._id)">✕</button>
      </li>
    </ul>
  </div>
</template>

Access the DB directly

import { useNovaDBInstance } from 'novadb-vue'

const db = useNovaDBInstance()   // returns the raw NovaDBInstance

const result = await db.collection('logs').insertMany([
  { level: 'info',  msg: 'started' },
  { level: 'error', msg: 'oops' },
])

Composables API

| Composable | Returns | Description | |---|---|---| | useQuery(fn, opts?) | { data, loading, error, refresh } | Reactive DB read | | useMutation(fn) | { mutate, loading, error } | DB write action | | useNovaDBInstance() | NovaDBInstance | Raw DB access |

useQuery options

{
  immediate?: boolean   // run on mount (default: true)
  interval?:  number    // poll every N ms
}

License

MIT