Introduction
Medusa is an open source headless commerce engine in Node.js that allows you to build online stores through its API with just a few commands - link to repo. On the other hand, Nuxt.js is a front-end framework, built on top of Vue.js, that includes some features out-of-the-box such as server-side rendered sites, static sites, file system routing, data fetching, meta tags, SEO, and much more.
Through this guide, you will learn how to set up a starter storefront with Nuxt.js for the frontend part and link it with a Medusa server. To do that, first, you will create a Nuxt.js project and set up some simple components, pages and layout. Then, you will link the Nuxt.js project with the Medusa server to get some products from the API and display them on the home page, a product's page, and a product detail page.
You can find the final code at this GitHub repository.
If you have any problems underway in the setup, please reach out in the Medusa Discord.
Prerequisites
To follow along with this tutorial you need the following:
- Node.js, it is recommended to have the latest LTS version installed.
- One of the following package managers installed:
,Copy to clipboardnpm
, orCopy to clipboardyarn
(included by default withCopy to clipboardnpx
v5.2+).Copy to clipboardnpm
- A Medusa server is seeded with some dummy data to work with, so if this is not the case, please first read the QuickStart guide to set up a Medusa server and after that come back to continue.
Setting up the storefront
⚠️ This tutorial uses Nuxt v2.15.8 because at the time of writing this article there are two versions of Nuxt, but the newer one (Nuxt v3) is yet in beta state.
Install a Nuxt.js project
To install a Nuxt project, you can get started quickly with
. Open your terminal and run the following commandCopy to clipboardcreate-nuxt-app
It will ask you some questions. You can choose the options that best fit your development workflow, but to keep this tutorial simple, I recommend installing the project using the following options:
Run Nuxt.js project
Once the Nuxt.js project is created, change to the directory of the storefront
And then run the following command
This command will run the storefront app by default at
. To test it, open your browser and go toCopy to clipboardhttp://localhost:3000
. You will get something like this:Copy to clipboardhttp://localhost:3000
Later on, you will change the default port to learn how to integrate your frontend with the Medusa server in a port that is not the default.
Make the storefront layout
Before you go into connecting the Medusa server with the storefront, you need to add some components and pages to the storefront. Open the storefront’s project in your preferred IDE.
You should see the following directories:
You will be focusing mainly on the
andCopy to clipboardcomponents
directories to design the layout for the storefront.Copy to clipboardpages
Components
Components are what make up the different parts of your page. They can be reused and imported into your pages, layouts, and even other components.
The storefront you are creating will have the following components:
- Logo
- Navbar
- Footer
- Product card
Go to the
directory and delete the default components that come with the Nuxt.js installation. Then add the following filesCopy to clipboardcomponents
Logo →
Copy to clipboardcomponents/App/Logo.vue
Navbar →
Copy to clipboardcomponents/App/Navbar.vue
Footer →
Copy to clipboardcomponents/App/Footer.vue
ProductCard →
Copy to clipboardcomponents/ProductCard.vue
Pay extra attention to the
,Copy to clipboardLogo
, andCopy to clipboardNavbar
components. They need to be inside a folder calledCopy to clipboardFooter
.Copy to clipboardApp
Pages
The pages directory contains your storefront views and routes. For this tutorial you will need only 3 pages:
- Home page
- Products page
- Product detail page
On the
directories, open theCopy to clipboardpages
file and replace the code that is already there with this oneCopy to clipboardindex.vue
Index →
Copy to clipboard/pages/index.vue
This page will be the home for your storefront. It is composed of a hero header and a grid configured to show only four products. The only thing to do here once you connect the storefront to the Medusa server will be to put the
component in aCopy to clipboardProductCard
loop to display the products.Copy to clipboardv-for
Now, you need to create a new directory called
which will hold inside the products pageCopy to clipboardproducts
and the product detail pageCopy to clipboard/pages/products/index.vue
. Add the following code to these pages.Copy to clipboard/pages/products/_id.vue
Products page →
Copy to clipboard/pages/products/index.vue
This page is similar to the home page but without the hero header. Here you will show a grid with all the products sent by the Medusa server.
Product detail page →
Copy to clipboard/pages/products/_id.vue
On this page, you will display all the information related to a specific product. For example, sizes, images, price, description, variants, etc...
⚠️ The three pages include aobject on theCopy to clipboardproduct
function to showcase the design while there isn’t a server to send requests. Once you connect the storefront with the Medusa server, the data coming from the server will replace the data in theCopy to clipboarddata
object.Copy to clipboardproduct
Layouts
Layouts are a great help when you want to have a basic structure for your Nuxt app. For example, to include a navbar and footer that will be shown on all the pages of the app. By default, a Nuxt project doesn't come with layouts, but it is easy to add them to your project.
To have a default layout on your storefront, create a
directory in the root of the project, and inside it, add a new file calledCopy to clipboardlayouts
with the following code:Copy to clipboarddefault.vue
Because the layout file was named
, the layout will automatically be applied to all the pages on the storefront.Copy to clipboarddefault.vue
Styling
Replace the content of
in the root of your Nuxt.js project with the following:Copy to clipboardwindi.config.ts
Change the Default Port
Now, you will change the port where the storefront app runs by default (port 3000). To do that, open the
file and add the following right after theCopy to clipboardnuxt.config.js
propertyCopy to clipboardssr
After that, run the following command to see in the browser what you have achieved with the components, pages, and layout that you just set up until this part of the tutorial.
Open your browser and go to the URL
. You should see something like this:Copy to clipboardlocalhost:3000
The storefront just shows static data for now. You will link the storefront with the Medusa server in the next section.
Link Medusa server with storefront
To link the server with the storefront, first, open up your Medusa project in your IDE, then open the
file where all your environment variables are set up.Copy to clipboard.env
Add the variable
with the value of the URL where your storefront will be running. Remember that you changed the default port on the storefront, therefore the URL isCopy to clipboardSTORE_CORS
.Copy to clipboardhttp://localhost:3333
After this, your Medusa server will be ready to receive a request from your storefront and send back responses if everything works as expected.
⚠️ The medusa server is running by default in port 9000, so the URL to use on the storefront to send requests is.Copy to clipboardhttp://localhost:9000
Testing connection with Medusa server
To be able to list the products on the home page you need to test if you can send requests from your storefront to the Medusa server and receive some data to show on the front-end.
⚠️ Be sure themodule is installed in your storefront project. If it’s not, then you need to install it following these instructions.Copy to clipboard@nuxtjs/axios
Once the project has the
module, you need to change the base URL for theCopy to clipboardaxios
module that you’ll use to make the requests to the server.Copy to clipboardaxios
Open the
file and look for theCopy to clipboardnuxt.config.js
property. Change theCopy to clipboardaxios
property to match the URL where the medusa server will be running:Copy to clipboardbaseURL
With this change, you don’t have to type the full URL each time you need to make an HTTP request to the Medusa server. So, instead of this:
You will do this:
If the server URL changes in the future, you only need to come back to one place and update that just one time, and everything will be working fine.
To fetch data from the API, this tutorial uses the
function that Nuxt.js offers as part of the core.Copy to clipboardfetch
Open the file
and add theCopy to clipboard/pages/index.vue
function in theCopy to clipboardfetch
section:Copy to clipboardscript
This function receives just one parameter
which is a service that allows making an HTTP request to the Medusa server. So, inside the function, a request is sent to the endpointCopy to clipboard$axios
to obtain the list of products from the Medusa server. Then, the list of products is returned.Copy to clipboard/store/products
To test this out, run the following command in the terminal to start the medusa server:
And start the storefront server:
Open your browser and go to the URL
. Then, open theCopy to clipboardlocalhost:3000
Copy to clipboardWeb Developer Tools.
If you find something like this in the console tab then your connection to the Medusa server is working. Otherwise, check that you follow all the steps and are not missing anything.
🧠 Remember, the URL where your storefront app is running has to be the same that was set up onvariable on the medusa server.Copy to clipboardSTORE_CORS
Display Products on the Home Page
Now is time to render the
result returned from the Medusa server on the storefront.Copy to clipboardproducts
In the same file
, update theCopy to clipboard/pages/index.vue
function to the following,Copy to clipboardfetch
With this update, the data coming back from the server replaces the
array with only four products to display on the homepage.Copy to clipboardproducts
The
applied on theCopy to clipboardv-for
iterates theCopy to clipboardProductCard
array and passes to the component, as aCopy to clipboardproducts
, a product with all the properties specified on the Medusa API for that endpoint.Copy to clipboardprop
If you check the storefront on the browser it should look something like this:
Display Products on The Products Page
In the navigation bar, there is a “Products” link. If you click on it, you will be redirected to the products page, but there will be only one static product. Let’s fix that to display all the products in your Medusa server on the page.
Open the
file, go to theCopy to clipboard/pages/products/index.vue
section and add the followingCopy to clipboardscript
functionCopy to clipboardfetch
Check the products page in your browser and you should get something like this:
Display Product Details
The last page to update is the product detail page. If you click on any product on the home page or the products page, it will take you to the product’s details page, but you won’t see any details at all. To fix it, you need to request a specific product to the Medusa server so you can get all the product info.
Open the file
and add the followingCopy to clipboard/pages/products/_id.vue
functionCopy to clipboardfetch
If you go again to your browser and click on any product, you will be taken to the product details page like before, but this time you’ll see all details rendered on the page.
Conclusion
As you learned in this tutorial it is very easy to make a storefront from zero with Nuxt.js and integrate it with your Medusa server.
The next steps for you would be to check the Medusa API to learn about all the different requests that you can call from your storefront to turn your Nuxt.js storefront into a full-fledged online store.
For example, you can implement the Cart functionality. The process would involve making the pages or components on the Nuxt.js app and then making the respective requests to the Medusa server to get the data to render on the storefront.
If you are interested in learning more about our Next.js based Medusa storefront, then check out our Next Starter template.
Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.
Share this post
Try Medusa
Spin up your environment in a few minutes.
