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.
Top comments (2)
Short and sweet, nice job mate
Thanks buddy!
I want to make it as simple as possible so that users can easily integrate and then dive deeper into the integration :)