Nuxt + Drizzle

Online Demo

In case you are using Drizzle, you can install the @rstore/nuxt-drizzle module instead of @rstore/nuxt to automatically generate the models and plugins from your drizzle schema.

npm i @rstore/nuxt-drizzle

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-drizzle',
  ],
})

Important Notice

By default the module will attempt to import useDrizzle from ~~/server/utils/drizzle that should return a drizzle instance.

Example:

// server/utils/drizzle.ts

import { drizzle } from 'drizzle-orm/libsql'

let drizzleInstance: ReturnType<typeof drizzle> | null = null

export function useDrizzle() {
  drizzleInstance ??= drizzle({
    connection: { url: useRuntimeConfig().dbUrl },
    casing: 'snake_case',
  })
  return drizzleInstance
}

You can customize this in the rstoreDrizzle.drizzleImport option in the Nuxt config.

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-drizzle',
  ],
  rstoreDrizzle: {
    drizzleImport: {
      name: 'useDb',
      from: '~~/server/useDb',
    },
  },
})

The module will automatically:

• load the drizzle schema from the drizzle.config.ts file (configurable with the rstoreDrizzle.drizzleConfigPath option in the Nuxt config),
• generate the models from the schema for each table with the relations,
• generate a REST API under the /api/rstore path to handle the CRUD operations,
• generate a plugin to handle the queries and mutations,
• generate all the necessary types for the models and the API.

Example drizzle schema:

import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'

export const todos = sqliteTable('todos', {
  id: integer().primaryKey({ autoIncrement: true }),
  title: text().notNull(),
  completed: integer().notNull().$defaultFn(() => 0),
  createdAt: integer({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
  updatedAt: integer({ mode: 'timestamp' }),
})

Example drizzle config:

import { defineConfig } from 'drizzle-kit'

export default defineConfig({
  dialect: 'sqlite',
  schema: './server/database/schema.ts',
  out: './server/database/migrations',
  casing: 'snake_case',
})

You can already use the store in your components without any additional configuration:

<script setup>
const store = useStore()

const { data: todos } = await store.todos.queryMany()
</script>

<template>
  <pre>{{ todos }}</pre>
</template>

Model Names

The model names are infered from the exported variable names in the drizzle schema, not the table names.

TIP

You can use nitro middlewares to add authentication to the API, for example in a server/middleware/auth.ts file.

Filtering

You can use the where option of any query to filter the results using drizzle's operators such as eq, gt, lt, etc. (which are auto-imported). Since rstore is local-first, it will also compute the where clause on the client side.

The supported operators are defined here (drizzle docs).

<script lang="ts" setup>
const store = useStore()

const email = ref('')

const { data: users } = await store.users.queryMany(() => ({
  where: email.value ? eq('email', email.value) : undefined,
}))
</script>

INFO

Please note that only simple filters are supported - you can't do joins or subqueries inside where.

Relations

You can use the include option to include related models in the query. Learn more here.

<script lang="ts" setup>
const store = useStore()

const { data: users } = await store.users.queryMany(() => ({
  include: {
    posts: true,
  },
}))
</script>

Configuration

apiPath

Customize the path to the API. By default it will be /api/rstore.

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-drizzle',
  ],
  rstoreDrizzle: {
    apiPath: '/api/my-api',
  },
})

drizzleConfigPath

Customize the path to the drizzle config file. By default it will look for a drizzle.config.ts file in the root of your project.

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-drizzle',
  ],
  rstoreDrizzle: {
    drizzleConfigPath: 'drizzle.config.ts',
  },
})

drizzleImport

Customize the import path for the drizzle instance. By default it will look for a useDrizzle function in the ~~/server/utils/drizzle.ts file.

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-drizzle',
  ],
  rstoreDrizzle: {
    drizzleImport: {
      default: { name: 'useDb', from: '~~/server/useDb' },
    },
  },
})