medusa
@nuxtjs/medusa

NuxtアプリケーションからMedusaへ簡単に接続

Nuxt Medusa

@nuxtjs/medusa

npm versionnpm downloadsLicense

Nuxt用Medusaモジュール。

機能

  • Nuxt 3 対応
  • @medusajs/js-sdkのラッパー
  • useMedusaClientのような便利なコンポーザブル
  • serverMedusaClientを使用したAPIサーバールートでの利用
  • TypeScript サポート

クイックセットアップ

  1. プロジェクトに@nuxtjs/medusaの依存関係を追加します。
npx nuxi@latest module add medusa
  1. 以下のMEDUSA_URL変数を含む.envファイルを作成します。
MEDUSA_URL=<YOUR_MEDUSA_URL> # By default https://:9000

これで完了です!NuxtでMedusaからデータを取得できるようになりました✨

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

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