A database is useless without any data.

But with Prisma, adding in seed data (or “dummy” data) is extremely easy.

This is the third article in a series dedicated to showing you how to use Prisma in your Nuxt 3 app:

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

In this article we’ll cover:

• How to generate our Prisma client
• How to update our Supabase database with migrations
• How to add in dummy data

First, though, we need to install Prisma itself.

Initialize Prisma

First, we need to install Prisma and generate our Prisma client:

pnpm add -D prisma @prisma/client

Install the prisma package globally as well so we can run the command without needing to create npm scripts:

pnpm add -g prisma

Now, we can run prisma generate which will generate a custom library based of what we’ve written in our schema.prisma file. Keep in mind, you’ll need to re-generate your client every time you change your schema.

If you’re wondering where this new client is output, just check the output of the prisma generate command — it tells you exactly, so you can go inspect it and see what it generated for you!

Initializing and Migrating the Database

At this point we’re completely set up, we just have no data in our database yet — we’ll come to that in a second though.

There are two more commands that are extremely important for working with Prisma:

• prisma migrate dev
• prisma migrate deploy

Both of these commands migrate your database, meaning they apply all the new changes you’ve made to your schema and update your database.

The prisma migrate dev command is useful in, well, development. It first performs a series of checks to ensure that the database hasn’t been changed, and that your migration will work as expected.

It will create the migration, apply the migration, and also re-generate the Prisma client for you.

After running this command, look inside of the prisma/migrations folder and you’ll see a new migration in there. It’s a series of SQL commands needed to set up your Postgres database that’s running on Supabase.

If you go into your Supabase database, you’ll now see that there are several tables created. The migration was applied successfully!

The prisma migrate deploy command is meant to be used in a continuous integration environment. All that it does is applies any pending migrations. You’d do all the checks and create the migration during dev, then run this command when you deploy to update your production database.

Seeding the Database with Data

A database is only as good as its data, so we need to get data in our shiny new database.

Prisma comes with a great feature that lets us seed our database with some initial data. This is perfect for development when we need some mock data, or if you need some default data in your table for your app to work correctly.

First, we’ll create a prisma/seed.js file that will insert the data:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function seed() {
  // Insert all data here
}

try {
  await seed();
  await prisma.$disconnect();
} catch (e) {
  console.error(e);
  await prisma.$disconnect();
  process.exit(1);
}

We’ll cover how to work with the Prisma client in the next couple articles, but for now we can actually pass in an entire JSON blob and Prisma will parse it out into the right database objects for us:

async function seed() {
    const course = await prisma.course.create({
    data: {
      title: 'TypeScript with Vue.js 3',
      chapters: {
        create: [
          {
            title: 'Chapter 1',
            slug: '1-chapter-1',
            number: 1,
            lessons: {
              create: [
                {
                  title:
                    'Introduction to TypeScript with Vue.js 3',
                  slug: '1-introduction-to-typescript-with-vue-js-3',
                  number: 1,
                  downloadUrl:
                    'https://vueschool.io/lessons/introduction-to-typescript-with-vue-js-3',
                  videoId: 684236333,
                  text: `In this lesson, we take a look at some of the benefits of using TypeScript with Vue.js including:

    Improved error detection in your IDE and at build time
    Safer and less stressful refactoring
    More focused and accurate IDE autocompletion

    We also answer the question: “Are there any cases when you wouldn’t want to use TypeScript?”.`,
                },
                {
                  title: 'TypeScript in Vue Components',
                  slug: '2-typescript-in-vue-components',
                  number: 2,
                  downloadUrl:
                    'https://vueschool.io/lessons/typescript-in-vue-components',
                  videoId: 684012498,
                  text: `In this lesson, we learn how to direct Vue Single File Components to work with typescript.`,
                },
                {
                  title: 'Typing Component Events',
                  slug: '3-typing-component-events',
                  number: 3,
                  downloadUrl:
                    'https://vueschool.io/lessons/typing-component-events',
                  sourceUrl:
                    'https://vueschool.io/lessons/typing-component-events',
                  videoId: 686921522,
                  text: `In this lesson, we learn how to type the payload of component events in Vue and TypeScript.`,
                },
              ],
            },
          },

// ...I'm sure you get the idea

You can also use a tool like Faker to generate dummy data. Really, you can do whatever you want in here, since it’s just a script. Let your imagination run wild!

One last thing, we need to tell Prisma what to do by adding a field to our package.json:

"prisma": {
  "seed": "node prisma/seed.js"
},

Now, we run prisma migrate reset and Prisma will completely reset our database, blowing away whatever data we have in there (which is nothing at this point). But, during the reset process, it will run this seed script, putting data in there.

So, if you’re ever at a point during development where you’ve messed up your database, you can just reset it and start fresh.

Just don’t run this on prod! 😬

If you go back to Supabase now you should see your seed data populated in the database.

Conclusion

After following these steps we’ve got our database fully up and running.

Our schema is created, we’ve created and run the migration for the Postgres database on Supabase, and we’ve populated that database with some dummy data.

Now, we’re ready to actually use the database in our Nuxt 3 app.

That’s what we’ll cover in the next article in this series.

Next Article: Getting Data from our Database with Prisma