Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Storyblok meets Vue 3 and Nuxt 3!

Developers
Alex Jover Morales
Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

The day has come! Our users are so excited about trying Nuxt 3 and all of the new features.

We've been working hard on Storyblok libs for Vue and Nuxt and they come with some surprises, including a new (auto-imported) Composables API!

Not only that: we fully refactored the libs setup. Now it's fresh and clean, powered by Vite. Let's see what's new!

Section titled New Naming New Naming

We moved storyblok-vue and storyblok-nuxt libraries to use scoped packages and we aligned with Vue and Nuxt versions.

Depending on which you want to use, you would npm install:

But the biggest change comes with @storyblok/nuxt, the Storyblok module for Nuxt 3 😉

Section titled Storyblok module for Nuxt 3 Storyblok module for Nuxt 3

If you want to use the module in a Nuxt 3 project, once created, you just need to follow three steps.

The first is to install it:

Installation
        
      npm install @storyblok/nuxt
    

Then add it to buildModules in your nuxt.config.js file:


nuxt.config.js
        
      export default defineNuxtConfig({
  buildModules: [
    ["@storyblok/nuxt", { accessToken: "YOUR_STORYBLOK_TOKEN" }],
  ]
});
    

Finally, all you need to do is interact with Storyblok API by using the brand new useStoryApi composable:

Installation
        
      <script setup>
const storyapi = useStoryApi();
const { data } = await storyapi.get("cdn/stories", { version: "draft" });
</script>
    

I know, there is no import statement for useStoryApi. Don't worry, the example above is right! Phew 😌

Nuxt 3 comes with auto-imports on <script setup>, and we make use of them so you don't have to.

Section titled Using Storyblok Bridge Using Storyblok Bridge

Thanks to Storyblok Bridge you can now enable the real-time experience on Storyblok editor (you used to do that with this piece of code using Storyblok Bridge's API).

Now it can be done in a one-liner using useStoryBridge like this:

Installation
        
      <script setup>
const storyapi = useStoryApi();
const { data } = await storyapi.get("cdn/stories", { version: "draft" });
const state = reactive({ stories: data.stories });

onMounted(() => {
  useStoryBridge(id, (story) => (state.story = story));
});
</script>
    

Section titled Challenges met on the journey Challenges met on the journey

A great story is not complete without overcoming a few hurdles, and while this one has a happy ending— it wasn't a totally smooth path.

The first challenge was Nuxt 3's lack of docs for building a module and auto-imports. That was a really fun journey into the Nuxt core.🤪

The second problem was finding out that Vue 3 directives need an SSR implementation, and it must be added to Vue's compiler options. You'll see all details in this twitter thread I posted giving some awareness to the topic.

Of course, we didn't want you to manipulate Vue compiler options in your project, so that's something we could solve on the module level (yay!).

Section titled Wrapping up Wrapping up

Are you excited enough to start experimenting with the Nuxt 3 module? I hope so! I couldn't wait to use the composable utilities.

Just a little warning: at the time this article is posted, Nuxt 3 is still unstable. If you find it a bit crashy, you can make it more stable by disabling Vite, adding vite: false to your Nuxt config. Oh, don't bother looking for that... it might not be in the docs yet 😉.

Go ahead and take a look at Storyblok Nuxt 3 repo yourself!

What are you building with it? I'd like to know! Tell me on Twitter at @alexjoverm 🤘