メインコンテンツにスキップ

Nuxt Prismaモジュールの使用

Nuxt Prismaモジュールは、Prisma ORMをNuxtアプリケーションに統合するプロセスを簡素化します。

Prisma ORMは、データベーススキーマをモデル化し、自動生成されたマイグレーションを提供し、直感的で型安全な方法でデータベースをクエリできるデータベースライブラリです。

このモジュールは、NuxtアプリケーションでPrisma ORMのセットアップと使用を合理化するためのいくつかの機能を提供し、データベースとのインタラクションを容易にします。

機能​

  • プロジェクトの初期化: Nuxtプロジェクト内にSQLiteデータベースを含むPrisma ORMプロジェクトを自動的にセットアップします。
  • コンポーザブル: Vueファイルで使用するための自動インポートされるusePrismaClient()コンポーザブルを提供します。
  • APIルート統合: APIルートでDBをクエリするためにPrismaClientのインスタンスを自動的にインポートします。
  • Prisma Studioアクセス: Nuxt Devtoolsを介してPrisma Studioにアクセスし、データを表示および手動で編集できます。

始める​

  1. 新しいNuxtプロジェクトを作成します。

    npm create nuxt test-nuxt-app

  2. プロジェクトディレクトリに移動し、Nuxt CLIを使用して@prisma/nuxtをインストールします

    cd test-nuxt-app
    npx nuxi@latest module add @prisma/nuxt

    警告

    pnpmを使用している場合、Prismaの依存関係をホイストしていることを確認してください。Prisma Studioの手順で詳細な指示に従ってください。

  3. 開発サーバーを起動する

    npm run dev

    開発サーバーを起動すると、次のようになります。

    1. Prisma CLIを自動的にインストールします
    2. SQLiteを使用してPrismaプロジェクトを初期化します
    3. 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
       }
    4. Prisma Migrateを使用してデータベーステーブルを作成するためのマイグレーションを実行するよう求められます。
      注

      モジュールを最初に起動したときにmigrationsフォルダーがない場合、データベースは自動的にマイグレーションされます。その後、スキーマの変更を適用するには、CLIで手動でnpx prisma migrate devを実行する必要があります。npx prisma migrate devコマンドを手動で実行すると、マイグレーションの管理が容易になり、安全性が高まり、マイグレーション関連のトラブルシューティングも可能になります。

    5. Prisma Clientをインストールして生成し、DBをクエリできるようにします
    6. Prisma Studioを自動的に起動します

  4. これで、プロジェクトでPrisma ORMを使用できます。Prisma Studioを追加するプロンプトを受け入れた場合、Nuxt DevtoolsからPrisma Studioにアクセスできます。アプリでPrisma Clientを使用する方法については、使用方法のセクションを参照してください。

別のデータベースプロバイダーの使用​

@prisma/nuxtモジュールは、Prisma ORMがサポートする任意のデータベースプロバイダーで動作します。始め方の例を、選択したデータベースを使用するように設定できます。手順は、既存データのないデータベースと既存データのあるデータベースで異なります。

既存データのないデータベースの使用​

始め方の例を、既存データのないPostgreSQLデータベースを使用するように設定するには

  1. Nuxt開発サーバーとPrisma Studioを停止します（まだ実行中の場合） 
    npx kill-port 3000  # Stops Nuxt dev server (default port)
    npx kill-port 5555  # Stops Prisma Studio (default port)
  2. 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
    }
  3. .envファイルのDATABASE_URL環境変数をPostgreSQLデータベースURLで更新します
    .env
    ## This is a sample database URL, please use a valid URL
    DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample"
  4. SQLiteデータベースファイルとmigrationsフォルダーを削除します 
    rm prisma/dev.db # Delete SQLite database file
    rm -r prisma/migrations # Delete the pre-existing migrations folder
  5. 開発サーバーを実行します 
    npm run dev
    開発サーバーを起動すると、スキーマの変更をデータベースにマイグレートするよう求められますので、同意してください。次に、Nuxt DevtoolsからPrisma Studioをインストールしてアクセスするプロンプトに同意します。
  6. @prisma/nuxtモジュールはPostgreSQLデータベースですぐに使用できます。アプリでPrisma Clientを使用する方法については、使用方法のセクションを参照してください。

既存データのあるデータベースの使用​

始め方の例を、すでにデータが含まれているPostgreSQLデータベースを使用するように設定するには

  1. 開発サーバーと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
  2. Prismaフォルダーを削除します 
    rm -r prisma/
  3. .envファイルのDATABASE_URL環境変数をPostgreSQLデータベースURLで更新します
    .env
    ## This is a sample database URL, please use a valid URL
    DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=sample"
  4. 既存のデータベースからPrisma Schemaとmigrationsフォルダーを生成するには、データベースをイントロスペクトする必要があります。イントロスペクションガイドのステップ1からステップ4を完了し、続行します。
  5. 開発サーバーを起動すると、migrationsフォルダーが既に存在するため、スキーマの変更をデータベースにマイグレートするプロンプトはスキップされます。Nuxt DevtoolsからPrisma Studioをインストールしてアクセスするプロンプトに同意します。
  6. @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​

初期セットアッププロンプトを実行した後、このモジュールはPrisma Clientのグローバルインスタンスを含むlib/prisma.tsファイルを作成します。

lib/prisma.ts
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クライアント拡張機能を使用した例です。

lib/prisma.ts
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>

設定​

@prisma/nuxtモジュールは、nuxt.config.tsのprismaキーを使用して設定できます。

nuxt.config.ts
export default defineNuxtConfig({
  // ...
  prisma: {
    // Options
  }
})

注

prismaキーは、npm run devを正常に実行してモジュールをセットアップした後、nuxt.config.tsで利用可能になります。

オプション型デフォルト説明
installCLIbooleantruePrisma CLIをインストールするかどうか。
installClientbooleantrueプロジェクトにPrisma Clientライブラリをインストールするかどうか。
generateClientbooleantruePrismaClientインスタンスを生成するかどうか。スキーマの変更に基づいてクライアントを更新するために、実行ごとにnpx prisma generateを実行します。
formatSchemabooleantruePrisma Schemaファイルをフォーマットするかどうか。
installStudiobooleantrueNuxt DevtoolsにPrisma Studioをインストールして起動するかどうか。
autoSetupPrismabooleanfalseセットアップ中のすべてのプロンプトをスキップするかどうか。このオプションは、スクリプトやCI/CDパイプラインでPrismaのセットアップを自動化するのに役立ちます。
skipPromptsfalsefalseすべてのプロンプトをスキップします
prismaRootstringfalseNuxtレイヤーを使用する場合に必須。例えば、databaseというNuxtレイヤーがある場合、ベースのNuxt設定ではprismaRootは./databaseとなります。これは、Prismaが初期化またはチェックされるフォルダを指します。
prismaSchemaPathstringundefinedNuxtレイヤーを使用する場合に必須。例えば、databaseというNuxtレイヤーがある場合、ベースのNuxt設定ではprismaSchemaPathは./database/prisma/schema.prismaとなります。
runMigrationbooleantruePrisma Migrationを自動的に実行するかどうか。MongoDBまたはPlanetScaleを使用している場合は、npx prisma db pushコマンドを使用してください。これらのデータベースではマイグレーションはサポートされていないため、このコマンドによりスキーマが適切に更新されます。

制限事項​

PrismaClientコンストラクタオプションはusePrismaClientコンポーザブルで設定できません​

usePrismaClientモジュールは現在、PrismaClientのコンストラクタオプションの設定を許可していません。

usePrismaClientコンポーザブルはエッジランタイムでサポートされていません​

usePrismaClientコンポーザブルは現在、エッジランタイムで動作しないPrismaClientインスタンスに依存しています。コンポーザブルのエッジサポートが必要な場合は、DiscordまたはGitHubでお知らせください。

トラブルシューティング​

pnpmでPrisma Studioが開かない​

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の依存関係をホイストするために次の設定を追加します。

.npmrc
hoist-pattern[]=*prisma*

これにより、Prismaの依存関係がpnpmによって適切に解決されます。

TypeError: Failed to resolve module specifier ".prisma/client/index-browser"の解決​

アプリケーションをビルドしてプレビューした後、ブラウザコンソールで次のエラーメッセージが表示される場合

TypeError: Failed to resolve module specifier ".prisma/client/index-browser"

この問題を解決するには、nuxt.config.tsファイルに次の設定を追加します。

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を削除してみてください（例：）

prisma/schema.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で交流する リポジトリにスターを付けたり、問題を報告したり、問題に貢献したりできます。
皆様のご参加を心よりお待ちしております！

© . All rights reserved.