Nuxt Medusa

Medusa の Nuxt モジュール。

機能

Nuxt 3 対応
@medusajs/medusa-js のラッパー
useMedusaClient などの便利なコンポーザブル
API サーバールートでの serverMedusaClient の使用
TypeScript サポート

クイックセットアップ

nuxt-medusa 依存関係をプロジェクトに追加

npm install --save-dev nuxt-medusa # pnpm or yarn

nuxt.config.ts の modules セクションに nuxt-medusa を追加

export default defineNuxtConfig({
  modules: ['nuxt-medusa'],
})

MEDUSA_URL 変数を含む .env ファイルを作成

MEDUSA_URL=<YOUR_MEDUSA_URL> # By default https://127.0.0.1:9000

これで完了です！Nuxt から Medusa のデータを取得できます ✨

<script setup lang="ts">
  const client = useMedusaClient();
  const { products } = await client.products.list();
</script>

Medusa からの CORS で問題が発生する場合は、medusa-config.js ファイルの process.env.STORE_CORS がローカルの Nuxt プロジェクトを指していることを確認してください。デフォルトでは、Medusa は https://127.0.0.1:8000 に対して CORS を設定していますが、Nuxt はデフォルトで https://127.0.0.1:3000 で実行されます。

開発

# Install dependencies
yarn

# Generate type stubs
yarn dev:prepare

# Develop with the playground
yarn dev

# Build the playground
yarn dev:build

# Run ESLint
yarn lint

# Run Vitest
yarn test
yarn test:watch

# Release new version
yarn release