#2 Building Headless Commerce - Adding Content with Storyblok CMS

#javascript #typescript #nuxt #vue

I always enjoyed working with Content Management Systems as they are really enjoyable to use. The experience of real time content editing on your page is just amazing and believe me you will like it too!

I have written already some articles about Storyblok but this time, I decided to record a video about it!

In this video, we will be adding a Headless CMS Storyblok to our previously created Headless Commerce application. If you have not seen this video yet (here is the link -> https://www.youtube.com/watch?v=QK6wPHFiRyM), I highly encourage you to do that as it explains really well the concepts of e-commerce and its development.

We will dynamically add content from Storyblok Dashboard to our Nuxt 3 application.

If you get lost at some point here is the ithub repo -> https://github.com/Baroshem/nuxt-shopify-tailwind and branch feat/storyblok.

Code

First thing we need to do is to install the required dependencies:

yarn add @storyblok/nuxt axios

Next, add @storyblok/nuxt module to the modules array in our nuxt.config.ts file and add required configuration:

  modules: ["@nuxtjs/tailwindcss","nuxt-graphql-client", "@storyblok/nuxt"],

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

Remember to also add the new environment variable in .env file:

STORYBLOK_ACCESS_TOKEN=<YOUR_TOKEN>

Let's add props in HeroBanner.vue component:

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
})
</script>

Finally, let's modify the template to by more dynamic:

<template>
  <section>
    <img
      :src="image"
      class="h-[500px] w-full"
    />

    <div class="mx-auto px-32">
      <div
        class="text-7xl font-bold text-center text-gray-800 rounded-lg shadow-lg py-16 px-12 bg-white/70 -mt-[170px] backdrop-blur-xl"
      >
        <h1 class="mb-3">{{ title }}</h1>
        <span class="text-green-600">{{ subtitle }}</span>
      </div>
    </div>
  </section>

Storyblok

Let's create a new component for our HeroBanner:

Finally, let's add the component to our content page and see the real editing experience:

Summary

Well done! You have just added Storyblok CMS to your Headless Commerce application. Keep in mind that this is just the beginning of the content creation and there are more things to discover like plugins for e-commerce.