Introducing Prisma Nuxt: Simplifying Data Management for Nuxt Apps

The Prisma Nuxt module is now available, offering a streamlined way to integrate Prisma ORM into Nuxt applications. This module extends Nuxt, a powerful framework for building full-stack Vue.js apps, with functionalities provided by Prisma ORM such as type-safe database interactions, automated migrations, and Prisma Studio for data management.

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:

   shellCopy

   npx nuxi@latest init test-nuxt-app
   

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

   shellCopy

   cd test-nuxt-app
   npm install @prisma/nuxt
   

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

   tsxCopy

   export default defineNuxtConfig({
     modules: ["@prisma/nuxt"],
     devtools: { enabled: true },
   });
   

4. Start the development server:

   shellCopy

   npm run dev
   

   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:

   tsxCopy

   export default defineNuxtConfig({
     modules: ["@prisma/nuxt"],
     prisma: {
       autoSetupPrisma: true,
     },
     devtools: { enabled: true },
   });
   

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

   htmlCopy

   <script setup>
   import { usePrismaClient } from '@prisma/nuxt'
   
   const prisma = usePrismaClient();
   const firstUserFound = await prisma.user.findFirst();
   </script>
   
   <template>
     <div>
       <p>{{ firstUserFound ?? "" }}</p>
     </div>
   </template>
   

3. Integrate the server component into app.vue:

   htmlCopy

   <template>
     <h1>Welcome to the Nuxt Prisma Demo</h1>
     <NuxtIsland name="FirstUser"> </NuxtIsland>
   </template>
   

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.