使用 Nuxt Prisma 模組
Nuxt Prisma 模組簡化了 Prisma ORM 與您的 Nuxt 應用程式的整合。
Prisma ORM 是一個數據庫庫，它允許您建模資料庫模式，提供自動生成的遷移，並讓您以直觀和型別安全的方式查詢資料庫。
該模組提供了多項功能，以簡化 Nuxt 應用程式中 Prisma ORM 的設定和使用，從而更輕鬆地與您的資料庫進行互動。
功能
- 專案初始化：自動在您的 Nuxt 專案中設定一個帶 SQLite 資料庫的 Prisma ORM 專案。
- 可組合函式：提供一個自動匯入的
usePrismaClient()可組合函式，可在您的 Vue 檔案中使用。 - API 路由整合：自動匯入
PrismaClient例項，可在 API 路由中用於查詢您的資料庫。 - Prisma Studio 訪問：透過 Nuxt Devtools 啟用 Prisma Studio 訪問，用於檢視和手動編輯資料。
開始
-
建立一個新的 Nuxt 專案
npm create nuxt test-nuxt-app -
導航到專案目錄，並使用 Nuxt CLI 安裝
@prisma/nuxtcd test-nuxt-app
npx nuxi@latest module add @prisma/nuxt
警告如果您使用
pnpm，請確保提升 Prisma 依賴項。請遵循Prisma studio 步驟獲取詳細說明。 -
啟動開發伺服器
npm run dev啟動開發伺服器將
- 自動安裝 Prisma CLI
- 使用 SQLite 初始化 Prisma 專案
- 在 Prisma Schema 檔案中建立一個
User和Post示例模型prisma/schema.prisma// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
} - 提示您執行遷移，以使用 Prisma Migrate 建立資料庫表注意
如果不存在
migrations資料夾，資料庫將在您首次啟動模組時自動遷移。之後，您需要手動在 CLI 中執行npx prisma migrate dev以應用任何模式更改。手動執行npx prisma migrate dev命令可以更輕鬆、更安全地管理遷移，並排查任何與遷移相關的錯誤。 - 安裝並生成一個 Prisma Client，使您能夠查詢資料庫
- 自動啟動 Prisma Studio
-
您現在可以在專案中使用 Prisma ORM。如果您接受了新增 Prisma Studio 的提示，您可以透過 Nuxt Devtools 訪問 Prisma Studio。請參閱使用部分瞭解如何在應用程式中使用 Prisma Client。
使用不同的資料庫提供商
@prisma/nuxt 模組適用於 Prisma ORM 支援的任何資料庫提供商。您可以配置入門示例以使用您選擇的資料庫。對於沒有現有資料的資料庫和有預先存在資料的資料庫，步驟將有所不同。
使用沒有現有資料的資料庫
配置入門示例以使用沒有任何現有資料的 PostgreSQL 資料庫
- 停止 Nuxt 開發伺服器和 Prisma Studio（如果它們仍在執行）
npx kill-port 3000 # Stops Nuxt dev server (default port)
npx kill-port 5555 # Stops Prisma Studio (default port) - 導航到
schema.prisma檔案並更新datasource塊以指定postgresql提供商prisma/schema.prisma// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
} - 使用您的 PostgreSQL 資料庫 URL 更新
.env檔案中的DATABASE_URL環境變數.env## This is a sample database URL, please use a valid URL
DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample" - 刪除 SQLite 資料庫檔案和遷移資料夾
rm prisma/dev.db # Delete SQLite database file
rm -r prisma/migrations # Delete the pre-existing migrations folder - 執行開發伺服器
啟動開發伺服器將提示您將模式更改遷移到資料庫，您應該同意。然後同意安裝並從 Nuxt Devtools 訪問 Prisma Studio 的提示。
npm run dev @prisma/nuxt模組已準備好與您的 PostgreSQL 資料庫一起使用。請參閱使用部分瞭解如何在應用程式中使用 Prisma Client。
使用有預先存在資料的資料庫
配置入門示例以使用已經有資料的 PostgreSQL 資料庫
- 停止開發伺服器和 Prisma Studio（如果它們仍在執行）
// stops Nuxt dev server from running incase it's still running
npx kill-port 3000
// stops Prisma Studio instance incase it's still running
npx kill-port 5555 - 刪除 Prisma 資料夾
rm -r prisma/ - 使用您的 PostgreSQL 資料庫 URL 更新
.env檔案中的DATABASE_URL環境變數.env## This is a sample database URL, please use a valid URL
DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample" - 要從現有資料庫生成 Prisma Schema 和遷移資料夾，您必須內省資料庫。完成內省指南中的步驟 1 到步驟 4，然後繼續。
- 啟動開發伺服器將跳過提示將模式更改遷移到資料庫，因為遷移資料夾已經存在。同意安裝並從 Nuxt Devtools 訪問 Prisma Studio 的提示。
@prisma/nuxt模組已準備好與您的 PostgreSQL 資料庫一起使用。請參閱使用部分瞭解如何在應用程式中使用 Prisma Client。
用法
選項 A：usePrismaClient 可組合函式
在 Nuxt 伺服器元件中使用可組合函式
如果您使用 Nuxt 伺服器元件，您可以在 .server.vue 檔案中使用 Prisma Client 的全域性例項
<script setup>
const prisma = usePrismaClient()
const user = await prisma.user.findFirst()
</script>
<template>
<p>{{ user.name }}</p>
</template>
選項 B：lib/prisma.ts
完成初始設定提示後，此模組會建立 lib/prisma.ts 檔案，其中包含 Prisma Client 的全域性例項。
import { PrismaClient } from '@prisma/client'
const prismaClientSingleton = () => {
return new PrismaClient()
}
declare const globalThis: {
prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
export default prisma
if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma
您可以透過在 lib/prisma.ts 檔案中使用客戶端擴充套件來定製 Prisma Client 的功能。這是一個使用 Accelerate 客戶端擴充套件的示例
import { PrismaClient } from '@prisma/client'
import { withAccelerate } from '@prisma/extension-accelerate'
const prismaClientSingleton = () => {
return new PrismaClient().$extends(withAccelerate())
}
declare const globalThis: {
prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
export default prisma
if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma
如果您希望使用Prisma Client 擴充套件的客戶端，請使用 lib 資料夾中的 prisma 例項。
在您的 API 路由中使用全域性 Prisma Client 例項
您可以在 Nuxt API 路由中按如下方式使用 Prisma Client 的全域性例項
import prisma from "~/lib/prisma";
export default defineEventHandler(async (event) => {
return {
user: await prisma.user.findFirst(),
};
});
在您的 Nuxt 伺服器元件中使用全域性 Prisma Client 例項
如果您使用 Nuxt 伺服器元件，您可以在 .server.vue 檔案中使用 Prisma Client 的全域性例項
<script setup>
import prisma from '~/lib/prisma';
const user = await prisma.user.findFirst()
</script>
<template>
<p>{{ user.name }}</p>
</template>
配置
您可以透過在 nuxt.config.ts 中使用 prisma 鍵來配置 @prisma/nuxt 模組
export default defineNuxtConfig({
// ...
prisma: {
// Options
}
})
在成功設定模組並執行 npm run dev 後，prisma 鍵在 nuxt.config.ts 中可用
| 選項 | 型別 | 預設值 | 描述 |
|---|---|---|---|
| installCLI | boolean | true | 是否安裝 Prisma CLI。 |
| installClient | boolean | true | 是否在專案中安裝 Prisma Client 庫。 |
| generateClient | boolean | true | 是否生成 PrismaClient 例項。每次執行都會執行 npx prisma generate，以根據模式更改更新客戶端。 |
| formatSchema | boolean | true | 是否格式化 Prisma Schema 檔案。 |
| installStudio | boolean | true | 是否在 Nuxt Devtools 中安裝並啟動 Prisma Studio。 |
| autoSetupPrisma | boolean | false | 是否跳過設定過程中的所有提示。此選項對於在指令碼或 CI/CD 管道中自動化 Prisma 設定很有用。 |
| skipPrompts | false | false | 跳過所有提示 |
| prismaRoot | string | false | 使用 Nuxt 層時必需。例如，如果您有一個名為 database 的 Nuxt 層，則在基本 nuxt 配置中，prismaRoot 將是 ./database。這指的是 Prisma 將被初始化或檢查的資料夾。 |
| prismaSchemaPath | string | undefined | 使用 Nuxt 層時必需。例如，如果您有一個名為 database 的 Nuxt 層，則在基本 nuxt 配置中，prismaSchemaPath 將是 ./database/prisma/schema.prisma。 |
| runMigration | boolean | true | 是否自動執行 Prisma 遷移。如果您正在使用 MongoDB 或 PlanetScale，請使用 npx prisma db push 命令。這些資料庫不支援遷移，因此此命令將確保您的模式得到適當更新。 |
限制
PrismaClient 建構函式選項無法在 usePrismaClient 可組合函式中配置
usePrismaClient 模組目前不允許配置 PrismaClient 建構函式選項。
usePrismaClient 可組合函式不支援邊緣執行時
usePrismaClient 可組合函式目前依賴於不支援邊緣執行時的 PrismaClient 例項。如果您需要可組合函式的邊緣支援，請透過 Discord 或 GitHub 告知我們。
排查問題
Prisma Studio 無法使用 pnpm 開啟
如果您在使用 pnpm 時遇到以下錯誤，並且 Prisma Studio 無法開啟
Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.pnpm/*@*/node_modules/@prisma/client/index-browser.js?v=' does not provide an export named 'PrismaClient' (at plugin.mjs?v=*)
要解決此問題，請在您的專案根目錄中建立一個 .npmrc 檔案，並新增以下配置以提升 Prisma 依賴項
hoist-pattern[]=*prisma*
這將確保 pnpm 正確解析 Prisma 依賴項。
解決 TypeError: Failed to resolve module specifier ".prisma/client/index-browser"
如果在構建和預覽應用程式後，在瀏覽器控制檯中遇到以下錯誤訊息
TypeError: Failed to resolve module specifier ".prisma/client/index-browser"
要解決此問題，請在您的 nuxt.config.ts 檔案中新增以下配置
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
'@prisma/nuxt',
],
// additional config
vite: {
resolve: {
alias: {
'.prisma/client/index-browser': './node_modules/.prisma/client/index-browser.js',
},
},
},
})
此配置確保模組說明符正確對映到相應的檔案。
包管理器支援的限制
該模組旨在與流行的包管理器（包括 npm、Yarn 和 pnpm）配合使用。但是，截至 v0.2，由於一個導致無限安裝迴圈的問題，它與 Bun 尚未完全相容。
此外，此包尚未在 Deno 上進行測試，因此未正式支援。
解決 Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
如果您即使已經生成了客戶端，仍然遇到以下訊息。
Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
請嘗試刪除 schema.prisma 中的 output = ../generated/prisma，例如
generator client {
provider = "prisma-client-js"
}
當您為 Prisma Client 指定自定義輸出目錄時，這意味著生成的客戶端程式碼將不會位於預設的 node_modules/@prisma/client 目錄中。相反，它將生成在您專案的根目錄下的 generated/prisma/。然而，Nuxt 中的 @prisma/nuxt 模組期望在預設的 @prisma/client 位置找到 PrismaClient。
與 Prisma 保持聯絡
與我們活躍的社群聯絡，繼續您的 Prisma 之旅 我們的活躍社群。保持瞭解，參與其中，並與其他開發者協作。
- 在 X 上關注我們 獲取公告、直播活動和實用技巧。
- 加入我們的 Discord 提問、與社群交流，並透過對話獲得積極支援。
- 在 YouTube 上訂閱 獲取教程、演示和直播。
- 在 GitHub 上參與 透過為倉庫加星、報告問題或為問題貢獻來參與。