Introducing Prisma Nuxt: Simplifying Data Management for Nuxt Apps

Features

The Prisma Nuxt module provides:

1. Automatic setup of a Prisma ORM project with a SQLite database within your Nuxt project.
2. Includes an auto-imported usePrismaClient() composable.
3. Automatically imports prisma for use in API routes.
4. Enables Prisma Studio access through Nuxt Devtools for seamless data management.

Setting up a Nuxt app with the @prisma/nuxt module

Let’s create a new Nuxt app and add the @prisma/nuxt module. This module will set up Prisma ORM for us and also launch Prisma Studio, allowing us to manipulate data in our SQLite database directly from the Nuxt Devtools:

1. Begin with a new Nuxt project:

2. Navigate to your project directory and install @prisma/nuxt:

3. Add @prisma/nuxt to your nuxt.config.ts:

4. Start the development server:

   This will:

   1. Install the Prisma CLI
   2. Initialize a Prisma project with SQLite
   3. Create example models (User and Post) in the Prisma Schema
   4. Prompt you to run a migration to create database tables with Prisma Migrate
   5. Install and generate a Prisma Client
   6. Prompt you to start Prisma Studio

5. Open localhost:3000 in your browser and follow terminal instructions to open Nuxt Devtools and Prisma Studio:

   

6. Use Prisma Studio to add a user to the database:

   

We’ve seen how easy it is to start with Prisma ORM in Nuxt, thanks to the module. Now proceed to the next section to see how to query your data from within the app using the usePrismaClient composable.

Using usePrismaClient composable to create a server component

Now we’ll create a server component that retrieves the first user from the database using the usePrismaClient composable in a server component:

1. Configure nuxt.config.ts to automate the setup process, so we aren't prompted to start Prisma Studio every time the development server reloads:

2. Create a new FirstUser.server.vue component in the components folder, and import usePrismaClient in the script:

3. Integrate the server component into app.vue:

4. View the user details queried from the database in your browser:

   

And that’s how easily you can get started using Prisma ORM in your Nuxt app using the Nuxt Prisma module.

Explore more in the documentation

For further details on the Nuxt Prisma module's capabilities, visit our documentation. This is an early release, and we're actively working on improvements based on community feedback. We welcome your contributions and suggestions. If you find this project useful, please star it on GitHub!

Get started

We have an active Discord community where you can ask for help and share your feedback, stay updated on our changelog, and follow us on X for the latest news.