<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:
Vue School Link
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects π
β
Summary
Well done! You have just learned how to integrate Medusa 2.0.0 with Nuxt.
Take care and see you next time!
And happy coding as always π₯οΈ