DEV Community

Cover image for Building Composable Commerce with Nuxt, Shopify, and Storyblok Crash Course Part Four
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

Building Composable Commerce with Nuxt, Shopify, and Storyblok Crash Course Part Four

In this section we will be updating our Composable Commerce application with dynamic content that we will fetch from the Storyblok.

First of all, I have created an account where I have no content created yet.

Storyblok Dashboard

After changing the preview URL I can see the following instructions about creating a local certificate and serving localhost application through a proxy so that it is available through https

HTTP Localhost Storyblok

Once configured, I can see the preview of our Composable Commerce application inside Storyblok.

Nuxt App in Storyblok

Now, to be able to fetch the data from Storyblok, I will use the official Nuxt module created by Storyblok DevRel team.

Storyblok module for Nuxt

The installation and usage is fairly simple. First of all, let’s install the module by typing the following command:

yarn add @storyblok/nuxt
Enter fullscreen mode Exit fullscreen mode

Next, let’s add the Storyblok module to our modules array in nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [... '@storyblok/nuxt'],


  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
Enter fullscreen mode Exit fullscreen mode

Don’t forget to update the .env file with environment variables:

Enter fullscreen mode Exit fullscreen mode

After that, we will create a new Block that will have a Field type of Plugin and it be used to fetch the data from e-commerce platform Shopify. You can read more about integration e-commerce plugins

Storyblok block library

For the field options, I have added an endpoint, token, limit, and selectOnly:

Storyblok Shopify Plugin

You can copy the values from the code section below:

endpoint =
token = ecdc7f91ed0970e733268535c828fbbe
limit = 3
selectOnly = product
Enter fullscreen mode Exit fullscreen mode

This will allow the plugin to correctly work and fetch the products from Shopify. Let’s select three products that we will show in our e-commerce application:

Products from Shopify in Storyblok

Now, to see the actual products in our application, let’s add the following code in our pages/index.vue HomePage:

<script setup lang="ts">


const story = await useAsyncStoryblok("home", { version: "draft" });



    <h2 class=" text-4xl text-center font-medium">Our Top Picks</h2>
    <div class="flex my-20">
        v-for="{ id, description, name, image } in story.content.body[0].products.items"
Enter fullscreen mode Exit fullscreen mode

Let’s stop for a second here and explain what was done step by step:

  1. We are calling the useAsyncStoryblok composable with the parameter home which is the name of our content page and we are passing options with version draft.
  2. We have created a h2 tag with text Our Top Picks
  3. We have created almost the same array of products as in the previous step, but this time with the data fetched from Storyblok.

The result is an array of products as shown below:

Products from Shopify Storyblok in Nuxt

After changing the direction in the Storyblok, we can immediately see the change in our application.

Changed direction

Thanks to the Shopify Plugin for Storyblok, we are now able to fetch the data from the e-commerce platform and create dynamic content with it like top products, blog sections, or similar that are based on the data from Shopify.

Deploying to Vercel

As we have our Composable Commerce application fully implemented, let’s now focus on deploying it to Vercel so that it is accessible from anywhere around the world.

I have pushed all of the code to the repository of the project so that it is easily accessible for you to try it out. It will also be used for deploying to Vercel.

Let’s create a new project in Vercel and import our project repository:

New Project in Vercel

After selecting the Git Repository, we are now able to select configuration of our project:

Project Configuration

Vercel automatically detected the framework preset for Nuxt.js so that it will configure the deployment so that we do not have to take care about it. It will also give our project some name. In here we can also configure build and output settings and environment variables.

In our case, we do not need any additional build and output settings as it was already configured for us, but we will need to add the environment variables so that our integration with Shopify and Storyblok will work correctly.

In here, we can use one of the recent cool features of Vercel and just copy+paste the content of our .env file and it will be populated automatically:

Environment Variables

After clicking Deploy it will start building and deploying our application:

Deploying project

After the building and deploying step is completed, we are redirected to the congratulations page with a lot of confetti. Our app was successfully deployed Vercel!

Deployed application

We can inspect it by going to the project like →


And that's it! By following this Crash Course you now know how to build a composable commerce from scratch with Nuxt, Shopify, and Storyblok.

Top comments (0)