Trying to manage database schemas alongside your Nuxt app types can be a challenge.

But with Prisma, most of these problems go away.

It handles all of the boilerplate and coordination, so you just write one single schema that’s used in your database and in your TypeScript app.

This is the first article in a series dedicated to showing you how to use Prisma in your Nuxt 3 app. Here is where we’re going:

1. Setting up Prisma (with Supabase) 👈 we’re here
2. Creating the Prisma Schema
3. Seeding the Database with Dummy Data
4. Getting Data from our Database with Prisma
5. Modifying Data using Prisma

In this article, we’ll lay the groundwork for working with Prisma and Supabase. We’ll also install and configure the Prisma VS Code extension, because it makes developing with Prisma so much nicer.

Let’s get started!

Setting up Supabase

The details for setting up Prisma and Supabase together have changed a bit recently, so please go here to find the most up-to-date instructions if this article isn’t working for you. I’ll try to keep this article updated though.

Here are the steps you’ll need:

1. Get the connection string. Go to Settings → Database → Connection string
2. Make sure you have your Supabase database password handy. If this is a new project, you can reset the password and use it in the next step.
3. Add a DATABASE_URL environment variable to your .env file. Set the value to be the connection string with the password. It’ll look something like this:

DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"

Connection Pooling

If you’re running your app in a serverless environment like Netlify or Vercel, you’ll need to enable connection pooling.

Every time a serverless function is run, it will create an entirely new connection to your Supabase database. This is not great, because it creates a lot of unnecessary overhead between your app and database.

Instead, we can enable connection pooling with PgBouncer, which will pool all of these connections into a single connection to our database. In order to enable this, we need to append ?pgbouncer=true to our connection URL.

But, when we’re updating our database schema during migrations we need to have a direct connection.

To accomplish this, we’ll use two environment variables — DATABASE_URL and DIRECT_DATABASE_URL.

We’ll copy DATABASE_URL to DIRECT_DATABASE_URL which doesn’t use connection pooling. Then, we’ll create the DATABASE_URL by appending ?pgbouncer=true to enable connection pooling:

DIRECT_DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"
DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres?pgbouncer=true"

Prisma VS Code Extension

Now that we have all of our environment variables set up, we need to make our development experience nicer by installing the official Prisma extension for VS Code.

This gives us a few really nice features:

• We can document our Prisma types using /// and get intellisense wherever we use these types in our code
• Proper syntax highlighting of the Prisma schema files
• Automatic formatting and code completion of schema files

Of course, there are many other features, but these are the most useful in my opinion.

Configuring with Prettier

We have a tiny bit of config to do here to make these two extensions play nicely.

In one of your settings.json files (user or workspace), add the following:

"[prisma]": {
  "editor.defaultFormatter": "Prisma.prisma"
},

You may also want to enable formatOnSave as well:

"editor.formatOnSave": true

Conclusion

Now we have all the boring configuration set up, and we’re ready to start actually doing something with Prisma.

We’ll get to that in the next part of this series, which is creating our Prisma schema. This schema is used for both our database in Supabase as well as our TypeScript code in our Nuxt app, keeping things all in one place!

Next Article: Creating the Prisma Schema