Nuxt Medusa

Medusa module for Nuxt.

• ▶️  Play online
• 📖  Documentation
• 🎥  Intro video
• ✨  Release Notes

Features

• Nuxt 3 ready
• Wrapper around @medusajs/medusa-js
• Handy composables like useMedusaClient
• Usage in API server routes with serverMedusaClient
• TypeScript support

Quick Setup

1. Add nuxt-medusa dependency to your project

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

2. Add nuxt-medusa to the modules section of nuxt.config.ts:

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

3. Create .env file with following MEDUSA_URL variable:

MEDUSA_URL=<YOUR_MEDUSA_URL> # By default http://localhost:9000

And that's it! You can now fetch data from Medusa in Nuxt ✨

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

If you are encountering problems with CORS from Medusa, make sure that process.env.STORE_CORS in medusa-config.js file is pointing to your local Nuxt project. By default, Medusa has CORS set for http://localhost:8000 while Nuxt is running by default on http://localhost:3000

Development

# Install dependenciesyarn# Generate type stubsyarn dev:prepare# Develop with the playgroundyarn dev# Build the playgroundyarn dev:build# Run ESLintyarn lint# Run Vitestyarn testyarn test:watch# Release new versionyarn release