DEV Community

Cover image for Dream Jamstack with Nuxt and Storyblok πŸš€
Jakub Andrzejewski
Jakub Andrzejewski

Posted on • Updated on

Dream Jamstack with Nuxt and Storyblok πŸš€

JAMstack is becoming more popular everyday, so I decided to give it a go and see if this really changes anything in terms of how modern websites are being built. I can't say that it was a game changer for me (but this is just my opinion) because I have seen several different approaches in modern development that I have found more useful like Headless, ZeroJS, Island Architecture, Server Components, and more. I might write about these concepts later if you think that they will be useful to share, let me know ;)

Let's go back to the initial topic which is finding what is in my opinion the dream stack for building Jamstack applications.

If you are interested in more visual explanation of this article, I gave a talk about this topic that you can check out below:


Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

Jamstack Architecture

You can check more about this concept here ->

In our case, we will be using following technologies for JavaScript, API, and Markup

Jamstack, Nuxt, Storyblok


We will be using Nuxt 3 as our main framework, NuxtContent (to be able to write Markdown), a little bit of TailwindCSS styling, and Storyblok which will be our API. Finally, we will be deploying our app to Vercel.

You can check out all those tools and technologies below:


Below, I have added some of the code snippets that I have found the most important for this tutorial. The full code can be seen here -> and also in the video linked at the top.

We will be using below Vue.js component to display an image of the cat. It will be used later for both static local data and dynamic data fetched from Storyblok:

// components/content/CatImage.vue

    <div class="flex flex-wrap w-1/3">
      <p>{{ title }}</p>
      <div class="w-full p-1 md:p-2 relative">
          class="block object-cover object-center w-full h-full rounded-lg"

  <script setup lang="ts">
  const props = defineProps({
    src: {
      type: String,
      required: true,
    title: {
      type: String,
      required: true,
Enter fullscreen mode Exit fullscreen mode

This component accepts two props (src and title) that are used for each individual image of the cat.
Apart from that, we have also created a gallery component that is used to display an array of cats fetched from Storyblok.

// components/content/CatImageGallery.vue

    <section class="overflow-hidden text-gray-700 ">
      <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32">
        <div class="flex flex-wrap -m-1 md:-m-2">
            v-for="image in story.content.body"

  <script setup lang="ts">
const story = await useAsyncStoryblok("home", { version: "draft" });
Enter fullscreen mode Exit fullscreen mode

The most important file for us is the file where we are creating our content that consists of normal .md content, vue.js components with local data, and an array of cat images built with the data fetched from Storyblok.

// content/

# Testing Nuxt Content

*Hello from Nuxt Content*

:cat-image{src= title="My Favorite Cat from Markdown"}

:cat-image{src= title="Second Favorite Cat"}

Enter fullscreen mode Exit fullscreen mode

Thanks to this, we are now able to connect three JAM elements (JS, API, Markup) with usage of Vue.js components, .md content, and data from Storyblok.

In order to see the actual result, we need to add following component to our main app.vue page.

// app.vue
    <ContentDoc path="/" class="prose text-left" />
Enter fullscreen mode Exit fullscreen mode

Also, also. Don't forget to add following configuration to nuxt.config.ts. Without it none of this will work ;)

// nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        ["@storyblok/nuxt", { accessToken: process.env.STORYBLOK_ACCESS_TOKEN }]
Enter fullscreen mode Exit fullscreen mode


Well done! By following this simple tutorial, you have managed to create a Cat Image Gallery application that is powered by static .md content, vue.js local data, and dynamic data fetched from Storyblok. Let me know if you would like me to dive deeper into JAMstack ecosystem and I will totally do it!

Top comments (0)