Build your new Storefront with Nuxt and Medusa 2.0.0

#nuxt #typescript #vue #opensource

Medusa.js is an open-source, headless commerce platform designed for developers to build scalable and customizable e-commerce solutions. It provides a flexible backend for managing products, orders, customers, and other e-commerce functionalities, while allowing you to create a custom front-end using your preferred framework or tools. Medusa.js is often seen as an alternative to platforms like Shopify and WooCommerce, especially for developers who want full control over their e-commerce stack.

The guys at Medusa released recently a new major version (2.0.0) that comes with several useful features. In this article, I would like to share with you that the module I am maintaining for Nuxt that integrates well with Medusa now supports this new major version! 🚀

Enjoy!

🤔 What comes with Medusa 2.0?

Medusa.js 2.0 is the latest version of the open-source, headless e-commerce platform built with Node.js. It provides a robust foundation for building custom commerce applications, marketplaces, and omnichannel stores. Here are some key features and improvements in Medusa.js 2.0:

Decoupled Commerce Modules: Cart logic, product handling, sales channels, and more are separate, reusable modules that can be adopted incrementally or replaced with custom implementations.
Built-in Backend Framework: Develop custom features and workflows using a powerful system for building extensions, data models, modules, workflows, UI extensions, API endpoints, and more.
Plugins: Integrate various services, such as shipping options, payments, and analytics, using Medusa’s plugin system.
Extensibility: Go beyond traditional B2C stores and build marketplaces, B2B platforms, and omnichannel stores with ease.
High-performance architecture: Medusa.js 2.0 is designed for speed and scalability, handling thousands of requests per second without breaking a sweat.

Apart from the features themselves, Medusa share case studies of two big companies that used Medusa.js 2.0:

Patyna, the largest vintage marketplace in Poland, migrated from WooCommerce to Medusa.js 2.0 with the help of Rigby, a Medusa expert partner.
Tekla, a textile brand, saw a 70% increase in conversion rates after switching from WooCommerce to Medusa.js 2.0. Conclusion

Medusa.js 2.0 is a powerful and flexible commerce platform that enables developers to build custom, scalable, and high-performance e-commerce applications. Its modular architecture, extensibility, and community support make it an attractive choice for businesses seeking to create unique commerce experiences.

🟢 Using Medusa 2.0.0 in Nuxt

Based on my experience with Supabase module for Nuxt, I wanted to replicate the same experience for Medusa. The installation and usage is really straightforward:

Add nuxt-medusa dependency to your project:

npx nuxi@latest module add medusa

Create an .env file with the following MEDUSA_URL variable:

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

That's it! You can now fetch data from Medusa in your Nuxt app ✨

<script setup lang="ts">
  const client = useMedusaClient();
  const { products } = await client.store.product.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

Apart from fetching e-commerce data from the client, you can also fetch it on the server side like following:

Enable the server option in the module configuration as shown below:

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

Create a new api endpoint server/api/products.ts:

import { serverMedusaClient } from '#medusa/server'
export default eventHandler(async (event) => {
  const client = serverMedusaClient(event)
  const { products } = await client.store.product.list()
  return { products }
})

Finally, let's fetch this data in our Vue components by using useFetch as shown below:

<script lang="ts" setup>
  const { data } = await useFetch('/api/products')
  const products = data.value.products
</script>

If you are interested in learning more about the changes, check out the release tag here

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below: