Working with Databases in Nuxt 4 | Full-Stack Web Dev #8
4This is Episode #8 of my Nuxt Full-Stack Web Development series.
In this video, I’ll show you how to connect a database to your Nuxt project using Drizzle ORM with SQLite. Databases are essential for storing and retrieving dynamic data, and with Drizzle ORM, managing your schema and queries becomes much more structured and type-safe. We’ll walk through setting up SQLite, integrating Drizzle with Nuxt, and using it inside your app to power backend functionality.
What’s covered in this video:
Setting up SQLite in a Nuxt project
Installing and configuring Drizzle ORM
Defining a schema with Drizzle
Running queries from your API routes
Displaying database content in your frontend
Subscribe to follow along with the rest of the series as we continue building this project step by step.
00:00 – Intro & Recap (API routes vs real database)
00:24 – What is Drizzle ORM & why use it
01:06 – Installing Drizzle ORM & Better SQLite3
02:01 – Installing dev dependencies (Drizzle Kit & types)
02:40 – Fixing install location mistake
03:19 – Creating drizzle.ts utility (database connection)
04:12 – Setting up environment variables (.env & db.sqlite)
05:13 – Creating schema.ts for fruits table
06:34 – Configuring drizzle.config.ts
07:36 – Generating migrations with Drizzle Kit
08:30 – Running migrations & exploring SQLite database
09:36 – Adding sample data (fruits) into the database
10:37 – Extending drizzle.ts with schema & types
11:56 – Connecting API route to database (hello.ts)
13:10 – Fetching fruits on the frontend (useFetch)
14:28 – Updating list rendering with keys & fruit.name
15:22 – Testing with new record (pineapple)
16:10 – Wrap up & conclusion