Nuxt Prisma

Are you a Nuxt developer? Or are you familiar with Prisma ORM and want to use it easily with Nuxt? Then this module is for you.

With this module, you can easily integrate Prisma ORM in your Nuxt app.

• 📖  Documentation

Features

• Seamlessly set up Prisma CLI, Prisma schema, Prisma Migrate, and Prisma Client
• Easily access Prisma Studio within Nuxt DevTools
• Auto-imported usePrismaClient() composable for your Vue files

Quick setup

1. Add @prisma/nuxt dependency to your project

   npm install --save-dev @prisma/nuxt
   

2. Add @prisma/nuxt to the modules section of nuxt.config.ts

   export default defineNuxtConfig({
     modules: [
       '@prisma/nuxt'
     ]
   })
   

3. Activate the module prompts for setting up Prisma ORM:

   npm run dev
   

   
   The prompts will direct you to:
   • install Prisma CLI
   • set up a Prisma schema
   • run a migration to create database tables with Prisma Migrate
   • install and generate Prisma Client to query your database
   • integrate Prisma Studio within Nuxt DevTools to conveniently view and edit your data

Options

You can pass in options to configure the module within the nuxt.config.ts file.

export default defineNuxtConfig({
  modules: [
    '@prisma/nuxt'
  ],
  prisma: {
    /* default module options */
    datasourceUrl: process.env.DATABASE_URL,
    log: [],
    errorFormat: 'colorless',
  }
})

Usage

This module provides you with an instance of Prisma Client to query your database. There are two approaches for accessing this Prisma Client instance:

Option A: lib/prisma.ts

After running through the initial setup prompts, this module creates the lib/prisma.ts file which contains a global instance of Prisma Client:

// lib/prisma.ts 
import { PrismaClient } from "@prisma/client"

const globalForPrisma = global as unknown as { prisma: PrismaClient }
    
export const prisma = globalForPrisma.prisma || new PrismaClient()
    
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
    
export default prisma

Importing the global Prisma Client instance

We recommend importing this instance into the script tags of your .vue files like so:

<script lang="ts" setup>
// Importing prisma instance from lib/prisma.ts
import { prisma } from '~/lib/prisma'

  async function main() {
    const posts = await prisma.post.findMany()
    console.log(posts)
  }
  main()
</script>

Using Prisma Client extensions

You can customize Prisma Client's capabilities by using client extensions in your lib/prisma.ts file. Here is an example using prisma-extension-random:

// lib/prisma.ts 
import { PrismaClient } from "@prisma/client"
// Import extension after installing
import prismaRandom from 'prisma-extension-random'

const globalForPrisma = global as unknown as { prisma: PrismaClient }
    
// use .$extends method on PrismaClient()
export const prisma = globalForPrisma.prisma || new PrismaClient().$extends(prismaRandom())
    
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
    
export default prisma

Here is an example usage of your Prisma Client instance with the extension in your .vue file:

<script lang="ts" setup>
import { prisma } from '~/lib/prisma'
  async function main() {
    // Use findRandom() method from prisma-extension-random 
    const posts = await prisma.post.findRandom() 
    console.log(posts)
  }
  main()
</script>

To integrate Prisma Pulse or Prisma Accelerate into your application, they must be configured as extensions using Option A's approach.

Option B: usePrismaClient()

This module exposes a Nuxt composable that is auto-imported inside your Vue files.

This composable is using Prisma Client under the hood via a Nuxt plugin. It gives access to the Prisma Client in your Vue components.

<script lang="ts" setup>
  async function main() {
    const prisma = usePrismaClient()
    const posts = await prisma.post.findMany()
    console.log(posts)
  }
  main()
</script>