如何在 Nuxt 中使用 Prisma ORM

10 分鐘

Prisma Nuxt 模組協助您在 Nuxt 應用程式中開始使用 Prisma，簡化初始設定流程。本指南說明如何設定 Nuxt 應用程式，使用 Prisma Nuxt 模組配置 Prisma Postgres，並將專案部署到 Vercel 以進行生產環境部署。

您將學到以下內容

如何使用 Prisma Nuxt 模組設定 Nuxt 專案。
如何在您的 Nuxt 應用程式中使用 Prisma Nuxt 模組配置和使用 Prisma Postgres。
如何將專案部署到 Vercel。

先決條件

為了遵循本指南，請確保您具備以下條件

Node.js 版本：Prisma 6 需要相容的 Node.js 版本。
帳戶
Git 和 Vercel 部署的基本知識（有幫助但非必要）。

1. 建立新的 Nuxt 專案並設定 Prisma Nuxt 模組

初始化新的 Nuxt 專案，選擇 npm 作為套件管理器並初始化 git
```
npx nuxi@latest init hello-world
```
注意
我們建議使用 npm，因為它是搭配 @prisma/nuxt 模組最穩定的選項。
導航到專案目錄並安裝 @prisma/nuxt 模組
```
cd hello-world
npm i @prisma/nuxt
```
安裝 Prisma Accelerate client extension，因為使用 Prisma Postgres 時需要此擴展
```
npm i @prisma/extension-accelerate
```

將 @prisma/nuxt 模組與以下配置新增至您的 nuxt.config.ts 檔案

// https://nuxt.dev.org.tw/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  modules: ["@prisma/nuxt"],
  experimental: {
    componentIslands: true,
  },
  devtools: { enabled: true },
});

2. 透過在本機執行開發伺服器來設定 Prisma ORM

使用 Prisma 模組配置 Nuxt 專案後，下一步是設定 Prisma ORM。此流程從啟動開發伺服器開始，開發伺服器會自動使用 SQLite 資料庫配置 Prisma。

執行以下命令以啟動開發伺服器

npm run dev

執行此命令後，系統會提示您使用 Prisma Migrate 執行資料庫遷移

? Do you want to migrate database changes to your database? › (Y/n)

確認您要遷移資料庫並建立初始表格，方法是按下鍵盤上的 Y。

一旦設定流程終止，它會

安裝 Prisma CLI。
使用 SQLite 資料庫初始化 Prisma 專案。

在 schema.prisma 檔案中建立範例 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
}

從先前的步驟中，為 User 和 Post 模型建立資料庫表格。
注意
如果您沒有 migrations 資料夾，則模組第一次啟動時會自動遷移資料庫。在那之後，您需要在 CLI 中手動執行 npx prisma migrate dev，以套用任何 schema 變更。手動執行 npx prisma migrate dev 命令可讓您更輕鬆且更安全地管理遷移，並疑難排解任何與遷移相關的錯誤。
安裝並產生 Prisma Client，讓您可以查詢您的資料庫。
安裝 Prisma Studio。

Prisma 設定完成後，開發伺服器應在 https://127.0.0.1:3000 上啟動。

接下來，停止伺服器，因為我們需要進行一些程式碼變更。

4. 更新應用程式程式碼

配置 Prisma 後，下一步是更新您的應用程式程式碼，以從資料庫擷取和顯示資料。

在專案的根目錄中，建立一個名為 components 的資料夾。
在 components 資料夾內，建立一個名為 User.server.vue 的檔案。此伺服器元件將從資料庫擷取並顯示第一個使用者的名稱

components/User.server.vue
```
<script setup>
   import { withAccelerate } from "@prisma/extension-accelerate";
   const prisma = usePrismaClient().$extends(withAccelerate());
   const user = await prisma.user.findFirst();
</script>

<template>
  <p>{{ user?.name ?? "No user has been added yet." }}</p>
</template>
```
注意
我們正在使用 withAccelerate() 擴展方法擴展 usePrismaClient() composable，以確保與 Prisma Postgres 的相容性。此擴展也將允許您快取您的查詢。
修改根目錄中的 app.vue 檔案，以使用 Nuxt Islands 包含新的伺服器元件

app.vue
```
<template>
  <div>
    <NuxtIsland name="User"></NuxtIsland>
  </div>
</template>
```
執行以下命令以再次啟動開發伺服器
```
npm run dev
```
透過在瀏覽器中開啟您的應用程式 https://127.0.0.1:3000，驗證應用程式程式碼是否正常運作。
由於資料庫中尚無使用者，因此應用程式將顯示
```
No user has been added yet.
```
當使用者新增至您的資料庫時，此訊息將動態更新。

完成這些步驟後，您的應用程式現在能夠從您的 Prisma 資料庫擷取資料，並在前端呈現。

5. 建立 Prisma Postgres 執行個體

為了儲存您的應用程式資料，您將使用 Prisma Data Platform 建立 Prisma Postgres 資料庫執行個體。

請按照以下步驟建立您的 Prisma Postgres 資料庫

登入並開啟 Console。
在您選擇的工作區中，按一下 New project 按鈕。
在 Name 欄位中輸入專案名稱，例如 hello-ppg。
在 Prisma Postgres 區段中，按一下 Get started 按鈕。
在 Region 下拉式選單中，選取最接近您目前位置的區域，例如 美國東部（維吉尼亞北部）。
按一下 Create project 按鈕。

此時，您將被重新導向至 Database 頁面，您需要在該頁面等待幾秒鐘，直到資料庫的狀態從 PROVISIONING 變更為 CONNECTED。

一旦綠色的 CONNECTED 標籤出現，您的資料庫即可使用！

然後，在 Set up database access 區段中找到您的資料庫憑證，複製 DATABASE_URL 環境變數。

DATABASE_URL=<your-database-url>

DATABASE_URL 環境變數將在後續步驟中需要。

6. 在您的 Nuxt 應用程式中設定 Prisma Postgres

現在 Prisma Postgres 執行個體已準備就緒，請更新您的 Nuxt 應用程式以使用此資料庫

透過將現有的 DATABASE_URL 值替換為您先前複製的值來更新 .env 檔案。它看起來會像這樣

.env
```
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY"
```
修改 schema.prisma 檔案，方法是變更位於 prisma 資料夾中 schema.prisma 檔案的 datasource 區塊中的資料庫提供者

prisma/schema.prisma
```
datasource db {
 provider = "postgresql"
 url      = env("DATABASE_URL")
}
```
刪除 SQLite 資料庫檔案（dev.db 和 dev.db-journal）以及 migrations 資料夾，它們都位於 prisma 目錄中。這會清除現有的 SQLite 設定，並準備您的專案遷移到 PostgreSQL。
透過執行 prisma migrate 命令，手動為 Postgres 資料庫建立新的遷移
```
npx prisma migrate dev --name init
```
再次啟動開發伺服器
```
npm run dev
```
開啟 Nuxt DevTools（按下 Shift+Option+ D），然後按一下左側邊欄中的 Prisma 標誌以開啟 Prisma Studio。然後透過指定 name 和 email 欄位的值來新增新的 User 記錄。
透過在 https://127.0.0.1:3000 重新整理您的應用程式來驗證應用程式中的資料。頁面應顯示您在 Prisma Studio 中新增的使用者名稱。例如，如果您新增了一個名為 Jon 的使用者，則應用程式將在瀏覽器中顯示 Jon。

恭喜，您的 Nuxt 應用程式現在已完全與 Prisma Postgres 整合！

7. 部署到 Vercel

透過遵循以下步驟，將您的 Nuxt 應用程式與 Prisma Postgres 整合部署到 Vercel

確保您的專案已進行版本控制並推送到 GitHub 儲存庫。如果您還沒有儲存庫，請在 GitHub 上建立一個。儲存庫準備就緒後，執行以下命令
```
git add .
git commit -m "Initial commit with Prisma Postgres integration"
git branch -M main
git remote add origin https://github.com/<your-username>/<repository-name>.git
git push -u origin main
```
注意
將 <your-username> 和 <repository-name> 替換為您的 GitHub 使用者名稱和儲存庫名稱。
登入 Vercel 並導航至您的儀表板。
建立新專案。遵循 Vercel 的匯入現有專案指南，但在步驟 3 停止，您將在按一下 Deploy 之前配置環境變數。
配置 DATABASE_URL 環境變數
1. 展開 Environment variables 區段。
2. 新增 DATABASE_URL 環境變數
  - Key：DATABASE_URL
  - Value：貼上您的 Prisma Postgres 連線 URL，例如從 Nuxt 專案中的 .env 檔案複製它。
  警告
  請勿在未設定 DATABASE_URL 變數的情況下部署。如果應用程式無法連線到資料庫，您的部署將會失敗。
按一下 Deploy 按鈕。Vercel 將建置您的專案並將其部署到線上 URL。
開啟 Vercel 提供的線上 URL 並驗證您的應用程式是否正常運作
- 如果您在 Prisma Studio 中新增了使用者，他們的名稱應會顯示在線上網站上。
- 如果沒有使用者存在，應用程式將顯示
```
No user has been added yet.
```
若要新增或管理資料
1. 透過 Prisma Data Platform 或本機執行個體開啟 Prisma Studio。
2. 在資料庫中新增或更新使用者資料。
3. 重新整理您的線上網站以確認變更。

恭喜！您的 Nuxt 應用程式與 Prisma Postgres 整合現在已在 Vercel 上上線並完全運作。

考量事項

本指南可協助您開始使用 Nuxt 模組的 Prisma Postgres。由於 Nuxt 模組正在積極發展，因此它並未涵蓋 Prisma 的所有功能或支援所有邊緣案例。對於更進階的功能或邊緣部署，請考慮直接使用 Prisma。

先決條件​

1. 建立新的 Nuxt 專案並設定 Prisma Nuxt 模組​

2. 透過在本機執行開發伺服器來設定 Prisma ORM​

4. 更新應用程式程式碼​

5. 建立 Prisma Postgres 執行個體​

6. 在您的 Nuxt 應用程式中設定 Prisma Postgres​

7. 部署到 Vercel​

考量事項​