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.

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

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

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

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

yarn add @storyblok/nuxt

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

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [... '@storyblok/nuxt'],

  ...

  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  }
})

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

SHOPIFY_STOREFRONT_HOST=https://graphql.myshopify.com/api/2023-01/graphql.json
SHOPIFY_STOREFRONT_ACCESS_TOKEN=ecdc7f91ed0970e733268535c828fbbe
STORYBLOK_ACCESS_TOKEN=8viwb69hydw4jxmQKAGFtgtt

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 https://www.storyblok.com/docs/guide/integrations/ecommerce/integration-plugin

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

You can copy the values from the code section below:

endpoint = https://graphql.myshopify.com
token = ecdc7f91ed0970e733268535c828fbbe
limit = 3
selectOnly = product

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:

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" });
</script>

<template>
  <div>

    ...

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

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:

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

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:

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

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:

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

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!

We can inspect it by going to the project like → https://nuxt-shopify-storyblok.vercel.app/

Summary

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.