{props.datasource.toLowerCase()} provider instead:
-
-{props.datasource.toLowerCase()} provider instead:
-
-{(props.datasource || props.database)?.toLowerCase()} provider instead:
+
+ID: {user.id}
-Name: {user.name || 'N/A'}
-Email: {user.email}
++ ID: {user.id} +
++ Name: {user.name || 'N/A'} +
++ Email: {user.email} +
{{ user?.name ?? "No user has been added yet." }}
``` - - :::note - We're extending the `usePrismaClient()` composable with the `withAccelerate()` extension method to ensure [compatibility with Prisma Postgres](/postgres/introduction/overview#using-the-client-extension-for-prisma-accelerate-required). This extension will also allow you to [cache your queries](/postgres/database/caching). - ::: 3. Modify the `app.vue` file in the root directory to include the new server component using Nuxt Islands: ```html file=app.vue @@ -170,7 +170,93 @@ With Prisma configured, the next step is to update your application code to fetc By completing these steps, your application is now capable of fetching data from your Prisma database and rendering it on the frontend. -## 5. Create a Prisma Postgres instance +## 5. Seed your database (optional) + +If you want sample data, create a `prisma/seed.ts` file. The following script uses the PostgreSQL adapter: + +```ts file=prisma/seed.ts +import 'dotenv/config' +import { PrismaClient } from './generated/client' +import { PrismaPg } from '@prisma/adapter-pg' + +const adapter = new PrismaPg({ connectionString: process.env.DATABASE_URL! }) +const prisma = new PrismaClient({ adapter }) + +const userData = [ + { + name: 'Alice', + email: 'alice@prisma.io', + posts: { + create: [ + { + title: 'Join the Prisma Discord', + content: 'https://pris.ly/discord', + published: true, + }, + ], + }, + }, + { + name: 'Nilu', + email: 'nilu@prisma.io', + posts: { + create: [ + { + title: 'Follow Prisma on Twitter', + content: 'https://www.twitter.com/prisma', + published: true, + }, + ], + }, + }, + { + name: 'Mahmoud', + email: 'mahmoud@prisma.io', + posts: { + create: [ + { + title: 'Ask a question about Prisma on GitHub', + content: 'https://www.github.com/prisma/prisma/discussions', + published: true, + }, + { + title: 'Prisma on YouTube', + content: 'https://pris.ly/youtube', + }, + ], + }, + }, +] + +async function main() { + console.log(`Start seeding ...`) + for (const u of userData) { + const user = await prisma.user.create({ + data: u, + }) + console.log(`Created user with id: ${user.id}`) + } + console.log(`Seeding finished.`) +} + +main() + .then(async () => { + await prisma.$disconnect() + }) + .catch(async (e) => { + console.error(e) + await prisma.$disconnect() + process.exit(1) + }) +``` + +Run the seed command whenever you need demo data: + +```terminal +npx prisma db seed +``` + +## 6. Create a Prisma Postgres instance To store your app's data, you'll create a Prisma Postgres database instance using the Prisma Data Platform. @@ -195,7 +281,7 @@ DATABASE_URL=