Storyblok meets Vue 3 and Nuxt 3!

Contents
    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!

    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@next, the 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 along with the axios peer dependency:

    Installation
    npm install @storyblok/nuxt@next axios

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

    nuxt.config.js
    import { defineNuxtConfig } from "nuxt3";
    
    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.

    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>

    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!).

    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 🤘

    Developer Newsletter

    Want to stay on top of the latest news and updates in Storyblok?
    Subscribe to Code & Bloks - our headless newsletter.

    An error occurred. Please get in touch with support@storyblok.com

    Please select at least one option.

    Please enter a valid email address.

    This email address is already registered.

    Please Check Your Email!

    Almost there! To confirm your subscription, please click on the link in the email we’ve just sent you. If you didn’t receive the email check your ’junk folder’ or