Best CMS for Vue & Nuxt = Storyblok 🚀

I am a huge fan of Headless Content Management System as a concept. It allows developers to prepare a system for non technical folks like marketers, content creators, or designers in drag-and-drop way that is easy to modify.

And considering that this system is headless, we can connect it to any frontend application very easily. There are many different headless Content Management Systems like Contentful, ContentStack, Sanity, Prismic, but I had the best experience by using Storyblok.

In the next few paragraphs, I will try to convince you why Storyblok is the best solution as a headless CMS for your next app.

🤔 Why Storyblok is a perfect CMS for Vue/Nuxt apps?

Using Storyblok with Vue or Nuxt apps has many great advantages.

Easiness of usage (visually)

Storyblok has a really great User Interface (especially after the release of the V2 version) that is easy to use and consistent.

Not much more to say here. Simple and intuitive = fun to use 😃

Easiness of usage (code)

Generally, adding Storyblok to either Vue or Nuxt app takes few minutes.

My favourite example is a Nuxt module that you can check out here.

In order to use Storyblok in Nuxt you need to:

1. Install the package:

yarn add @storyblok/nuxt

1. Add the module to nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    ["@storyblok/nuxt", {
      accessToken: "<your-access-token>" 
    }]
  ]
});

1. And start using it in Vue components:

<script setup lang="ts">
  const story = await useAsyncStoryblok("vue", { version: "draft" });
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

And that's it! Only three steps are needed to use Storyblok in your Nuxt app.

Numerous content about Storyblok and Vue/Nuxt

There are many great content creators that share content about Storyblok which is also great for you because if you want to implement something less popular or encountering a problem there is a high chance that you will find an answer for it. I recommend following these authors:

1. https://www.youtube.com/@AlvaroDevLabs
2. https://www.youtube.com/@LearnVue
3. https://www.youtube.com/@timbenniks

And of course, Storyblok blog:

https://www.storyblok.com/blog/

🟢 How do we use Storyblok at Vue Storefront?

We have a long story with Storyblok at Vue Storefront as it was one of our first integrations that we have developed to help e-commerce developers to integrate headless content management systems into existing storefront applications.

If you are using Vue Storefront 2, we have a documentation about using Storyblok with it that you can check out here

For the most modern version of the Vue Storefront (called Unified Storefront) we don't have an integration with Storyblok yet.

📖 Learn more

There is a great course about Storyblok in Vue (Nuxt 3) apps from Vue School that you can check out with this link or by clicking the image below:

It will help you build modern JamStack apps with Nuxt 3, Markdown and Storyblok 😉

If you are interested in building Modern E-Commerce applications that are composed from Storefront, E-Commerce Platform and headless CMS, check out my video crash course about this topic:

It will guide you step by step through the process of building Composable Commerce application.

✅ Summary

Well done! You have just learned about my favourite Headless Content Management System - Storyblok. I really like the product and especially the DevRel team that is always helpful and eager to make great things with Storyblok. It is my go to CMS and I think it should be your solution as well :)

Take care and see you next time!

And happy coding as always 🖥️