# Prisma with Vue.js Integration Setup Guide
This guide provides step-by-step instructions for integrating Prisma ORM with a Vue.js application.
## Prerequisites
- Node.js and npm installed
- Vue.js project initialized
- PostgreSQL database (or any other supported database)
## Installation
1. Install Prisma and its dependencies:
```bash
npm install @prisma/client
npm install -D prisma
```
2. Initialize Prisma in your project:
```bash
npx prisma init
```
## Database Schema
1. Define your schema in `prisma/schema.prisma`:
```prisma
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
```
## API Service Setup
1. Create a Prisma service file `src/services/prisma.ts`:
```typescript
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default prisma
```
2. Create a users service `src/services/users.ts`:
```typescript
import prisma from './prisma'
import type { User } from '@prisma/client'
export const userService = {
async getUsers() {
try {
return await prisma.user.findMany({
include: {
posts: true
}
})
} catch (error) {
console.error('Failed to fetch users:', error)
throw error
}
},
async getUserById(id: number) {
try {
return await prisma.user.findUnique({
where: { id },
include: {
posts: true
}
})
} catch (error) {
console.error(`Failed to fetch user ${id}:`, error)
throw error
}
},
async createUser(data: { email: string; name?: string }) {
try {
return await prisma.user.create({
data,
include: {
posts: true
}
})
} catch (error) {
console.error('Failed to create user:', error)
throw error
}
},
async updateUser(id: number, data: { email?: string; name?: string }) {
try {
return await prisma.user.update({
where: { id },
data,
include: {
posts: true
}
})
} catch (error) {
console.error(`Failed to update user ${id}:`, error)
throw error
}
},
async deleteUser(id: number) {
try {
return await prisma.user.delete({
where: { id }
})
} catch (error) {
console.error(`Failed to delete user ${id}:`, error)
throw error
}
}
}
```
3. Create a posts service `src/services/posts.ts`:
```typescript
import prisma from './prisma'
import type { Post } from '@prisma/client'
export const postService = {
async getPosts() {
try {
return await prisma.post.findMany({
include: {
author: true
}
})
} catch (error) {
console.error('Failed to fetch posts:', error)
throw error
}
},
async getPostById(id: number) {
try {
return await prisma.post.findUnique({
where: { id },
include: {
author: true
}
})
} catch (error) {
console.error(`Failed to fetch post ${id}:`, error)
throw error
}
},
async createPost(data: { title: string; content?: string; authorId: number }) {
try {
return await prisma.post.create({
data,
include: {
author: true
}
})
} catch (error) {
console.error('Failed to create post:', error)
throw error
}
},
async updatePost(id: number, data: { title?: string; content?: string; published?: boolean }) {
try {
return await prisma.post.update({
where: { id },
data,
include: {
author: true
}
})
} catch (error) {
console.error(`Failed to update post ${id}:`, error)
throw error
}
},
async deletePost(id: number) {
try {
return await prisma.post.delete({
where: { id }
})
} catch (error) {
console.error(`Failed to delete post ${id}:`, error)
throw error
}
}
}
```
## Vue Components Implementation
1. Create a Users component `src/components/Users.vue`:
```vue
```
2. Create a Posts component `src/components/Posts.vue`:
```vue
```
## Environment Setup
1. Create `.env` file:
```env
DATABASE_URL="postgresql://user:password@localhost:5432/dbname?schema=public"
```
2. Add `.env` to `.gitignore`:
```
.env
```
## Database Migration
1. Generate Prisma Client:
```bash
npx prisma generate
```
2. Create and apply migrations:
```bash
npx prisma migrate dev --name init
```
## Best Practices
1. Database Connection
- Use connection pooling in production
- Keep environment variables secure
- Use migrations for schema changes
2. Error Handling
- Implement proper error handling in services
- Show user-friendly error messages
- Log errors for debugging
3. Type Safety
- Use TypeScript for better type safety
- Leverage Prisma's generated types
- Define proper interfaces for data structures
4. Performance
- Use proper indexes in schema
- Implement pagination for large datasets
- Cache frequently accessed data
5. Security
- Validate input data
- Implement proper authentication
- Use prepared statements (handled by Prisma)
## Development Workflow
1. Make schema changes in `schema.prisma`
2. Generate migration:
```bash
npx prisma migrate dev --name
```
3. Update Prisma Client:
```bash
npx prisma generate
```
4. Use Prisma Studio for database management:
```bash
npx prisma studio
```