test-nuxt-prisma v1.1.0

Nuxt Prisma

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 test-nuxt-prisma dependency to your project

   npm install --save-dev test-nuxt-prisma

2. Add test-nuxt-prisma to the modules section of nuxt.config.ts

   export default defineNuxtConfig({
     modules: [
       'test-nuxt-prisma'
     ]
   })

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

   npm run dev

Options

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

export default defineNuxtConfig({
  modules: [
    'test-nuxt-prisma'
  ],
  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 this 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>