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>
Table of Contents