Medusa won the Golden Kitty Award for Best Ecommerce Product ✨  Learn More

Medusa Logo
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
Tutorial

Nuxt-Medusa Module: Integrate Medusa with your Nuxt application

Understand how the new Nuxt-Medusa module works and how to get started with it.

Nuxt-Medusa Module: Integrate Medusa with your Nuxt.js application

Share

Jakub Andrzejewski
Jakub AndrzejewskiMar. 15, 2023• 3 min.

Great news for Nuxt fans. Jakub Andrzejewski recently created a new nuxt-medusa module, that simplifies the process of integrating Medusa’s commerce modules with a Nuxt application.

Access the module here, including a tutorial, documentation, video, and release notes. You can also try it directly in your browser using the module sandbox on Stackblitz.

What is Medusa? Medusa provides modular and open commerce infrastructure built to make custom-development processes easier for developers. Medusa’s components and APIs are built in abstract layers, making it easy for developers to customize the core functionalities for different commerce cases.

Technical aspects

The Nuxt-Medusa module is built on top of Nuxt.js, a popular framework for building server-side rendered Vue.js applications. It is designed to work seamlessly with Medusa.

The module uses @medusa/medusa-js under the hood to query the Medusa API and retrieve data, which is then exposed to the Nuxt.js application.

Features

Setting up the Nuxt-Medusa module is a relatively straightforward process. The module is relatively new, but it includes short and concise documentation that provides step-by-step guidance on configuring and using its two available features.

  • useMedusaClient composable.
  • serverMedusaClient utility.

At this moment, there aren’t more features available, but the module maintainer opened an issue on the GitHub repository, so other users can ask for new features.

Why use it

  • It simplifies the process of integrating the Medusa engine with a Nuxt.js application. This can save you significant time and effort, as they no longer need to manually configure and integrate the two frameworks.
  • It’s the first module in the Nuxt 3 version that specifically targets digital commerce functionality. This opens the door for developers interested in building commerce applications using Nuxt.js, providing a streamlined and efficient way to integrate Medusa with their Nuxt.js applications.

How to Install the Module

Install the module in your Nuxt.js project:

npm install --save-dev nuxt-medusa

Then, add nuxt-medusa to the modules section of nuxt.config.ts:

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

Finally, in your .env file add a MEDUSA_URL variable with its value being the URL of the server:

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

How to Use the Module

You can fetch data from Medusa in Nuxt like this:

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

And you will get the data about your products. It’s that simple!

This approach certainly works in case of fetching products’ data on the client (browser). However, in some cases you may want to fetch this data on the server side of Nuxt (for example, to reduce network latency of customers visiting your website). You can do this with the module as well!

To fetch the data on the server side, let’s first enable this functionality by setting the server option in the configuration to true:

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

This will enable the server utility to be imported in your project and you can use it like following:

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

As you can see, the approach here is almost the same as in the client, with the only difference that we are using the event Handlers of Nuxt to handle this functionality on the server.

Finally, we can call this event handler from the frontend like the following:

<script lang="ts" setup>
const { products } = await $fetch('/api/products')
</script>

And that’s it! You can now fetch the products on the server. Keep in mind that you are not limited to products only, as you can fetch basically whatever you like as you have access to the Medusa client.

Happy coding!

Want to contribute to the Medusa Community?

If you are also interested in building a community plugin for Medusa and showcasing it to the broader Medusa community, do not hesitate to contact nick@medusajs.com.

We appreciate the contributions.

Share

Medusa Newsletter

Stay up to date

In our Newsletter you get the most important Medusa news directly in your inbox

Up Next

altText of the image

How to Implement Ecommerce Cart Functionality

This article outlines the crucial aspects to consider for a successful ecommerce cart that satisfies both user needs and technical requirements.

Person photo
Teslim OdumuyiwaMar. 7, 2023• 8 min.

You may also like

The History of Ecommerce: 1979 to 2023

The History of Ecommerce: 1979 to 2023

This article goes down the memory lane of ecommerce, uncovering some old-but-gold ecommerce websites, and highlighting the main difference from ecommerce today.

Person photo
Shahed NasserMar. 9, 2023• 9 min.
5 Shopify Problems Developers Should Know Before Using It

5 Shopify Problems Developers Should Know Before Using It

This article will first highlight five drawbacks that Shopify has and how Medusa can potentially resolve them.

Ekisowei Daniel
Ekisowei DanielMar. 8, 2023• 5 min.
Best Practices for Ecommerce Checkout Design for your Business

Best Practices for Ecommerce Checkout Design for your Business

Optimize your checkout process and increase your business's online sales with this guide of best practices for ecommerce checkout design

Safa Emhemed
Safa EmhemedMar. 21, 2023• 7 min.
Pros and Cons of using Node.js for Ecommerce

Pros and Cons of using Node.js for Ecommerce

This article highlights the pros and cons of using Node.js in ecommerce.

Prince Onyeanuna
Prince OnyeanunaMar. 14, 2023• 8 min.
The History of Ecommerce: 1979 to 2023

The History of Ecommerce: 1979 to 2023

This article goes down the memory lane of ecommerce, uncovering some old-but-gold ecommerce websites, and highlighting the main difference from ecommerce today.

Person photo
Shahed NasserMar. 9, 2023• 9 min.
5 Shopify Problems Developers Should Know Before Using It

5 Shopify Problems Developers Should Know Before Using It

This article will first highlight five drawbacks that Shopify has and how Medusa can potentially resolve them.

Ekisowei Daniel
Ekisowei DanielMar. 8, 2023• 5 min.
Best Practices for Ecommerce Checkout Design for your Business

Best Practices for Ecommerce Checkout Design for your Business

Optimize your checkout process and increase your business's online sales with this guide of best practices for ecommerce checkout design

Safa Emhemed
Safa EmhemedMar. 21, 2023• 7 min.
Pros and Cons of using Node.js for Ecommerce

Pros and Cons of using Node.js for Ecommerce

This article highlights the pros and cons of using Node.js in ecommerce.

Prince Onyeanuna
Prince OnyeanunaMar. 14, 2023• 8 min.
Medusa Logo

Product

Medusa for B2BIntegrationsGet StartedCareers
We're hiring

Developers

DocsAPI ReferencesCommunityDiscussions

Medusa

BlogPricingAboutContact Us

Newsletter

Get a summary of what we’ve shipped during the last month, behind the scenes updates, and team picks. Unsubscribe any time.

© 2023 MedusaJS, Inc.