Drizzle ORM Example

How Drizzle ORM Works in Nuxt

What is Drizzle? Drizzle is a lightweight, type-safe ORM for TypeScript/JavaScript that works with various databases including SQLite. It provides a SQL-like API while maintaining type safety and excellent developer experience.

Database Schema Definition

The schema is defined in lib/db/schema/fruit.ts using sqliteTable. Our fruits table has id (auto-increment primary key), name (required text), and dateCreated (Unix timestamp).

Database Connection

The database connection is established in lib/db/index.ts using drizzle from drizzle-orm/libsql. It connects to the local SQLite database file specified via environment variable.

Server API Routes

CRUD operations are handled by server API routes in server/api/fruits/v1/:

• GET /api/fruits/v1 - List all fruits
• POST /api/fruits/v1 - Add new fruit
• PUT /api/fruits/v1/[id] - Update fruit name
• DELETE /api/fruits/v1/[id] - Delete fruit

Client-Server Communication

The component uses Nuxt's $fetch composable to make HTTP requests to the server API routes. This provides automatic type inference and error handling. Data flows from server to client and back, with the UI updating reactively when the fruits ref changes.

Best Practices Followed

• TypeScript throughout for type safety
• Error handling with createError()
• Input validation on server side
• Reactive state management with ref()
• Server-side rendering safe API calls
• Confirmation dialogs for destructive actions
• Local SQLite for development (easily switchable to production DB)