Building Composable Commerce with Nuxt, Shopify, and Storyblok Crash Course Part One
Tags: vue, javascript, webdev, tutorial
Published: 2023-03-20 08:24:14

Building modern e-commerce websites is difficult. Customers want to have the most modern tooling, best-of-breed solutions, and the freedom to migrate to other tools easily. In order to deliver that, companies decided to switch from monolith providers into composable architecture. Monolith architecture e-commerce means that the provider delivers to the customers everything that is needed to start an online commerce website including e-commerce platform itself, storefront, content management system, etc. Taking a look at the modern architecture for e-commerce, two major concepts have been getting a lot of popularity recently and these are **Headless** & **Composable Commerce.**

**Headless Commerce** is a common term for software architecture, in which the central assumption is separating the UI (frontend) from the business logic (backend). It provides even the most mature businesses with the maneuverability and flexibility of a start-up.

Below, you could see a simple graphic explanation of how Headless Commerce architecture looks like:


![Headless Commerce Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b0td8164qvo4d2lhr50.png)


If we dive deeper into what can be part of either Frontend or Backend of Headless Commerce, we can see that there is a lot more there than meets the eye (cool Transformers reference here ;))

![Backend and Frontend of Headless Comemrce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh5gc0m9r9awdll8epe9.png)

Apart from the website itself, our Frontend can be accessed via mobile devices, IoT, watches, social media platforms, and many more. Same for our Backend, which can contain checkout integration, promotions, loyalty programs, etc.

In this tutorial however, we will elevate our application to another level by not only going for Headless Commerce architecture but also Composable Commerce. This will allow us to compose the e-commerce application with the best of breed solutions for frontend, backend, and CMS.

![Composable Commerce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mlkjh3qm3lwkbd4fowb.png)

In the next three articles you will learn how to build a Headless/Composable Commerce application from scratch with Nuxt, Shopify, and Storyblok. Each article will be a continuation of the previous one but can be threated as a separate tutorial too!

1. Building a Storefront with Nuxt
2. Adding e-commerce data from Shopify
3. Adding dynamic content from Storyblok (with Shopify plugin) and deploying the app to Vercel.

If you will feel lost at any points (or you just prefer to see the actual code of the project) you can access the public repository with this link → [https://github.com/Baroshem/nuxt-shopify-storyblok](https://github.com/Baroshem/nuxt-shopify-storyblok)

In the Homepage, we have a navigation, big banner attracting attention, a list of products from Shopify, a list of products from Storyblok (with Shopify plugin) and a footer.

![Composable Commerce Homepage Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efqshs6m9zblh049p96k.png)

![Composable Commerce Homepage Product List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkprek70jh6svfe0d9dx.png)

![Composable Commerce Homepage CMS Content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oraoz9lcivm07pud6z45.png)


In the Product Page we have a header, a Product Detail page, a list of the related products and a footer

![Composable Commerce Product Page Detail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq2osef23pxzxca2tqwb.png)

![Composable Commerce Product Page Related](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fgw9e0zmxzzugfojdu4.png)

The final application can be seen here → [https://nuxt-shopify-storyblok.vercel.app/](https://nuxt-shopify-storyblok.vercel.app/)

In the next article you will learn how to build certain parts of our application starting with Nuxt itself and ending on deploying the app to Vercel. 

Stay tuned!