Storyblok meets Vue 3 and Nuxt 3!
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:
- @storyblok/vue-2: for Vue 2
- @storyblok/vue: for Vue 3
- @storyblok/nuxt-2: for Nuxt 2
- @storyblok/nuxt: for Nuxt 3
But the biggest change comes with @storyblok/nuxt, 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:
npm install @storyblok/nuxt
Then add it to buildModules in your nuxt.config.js file:
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:
<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:
<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 🤘
| Resource | Link |
|---|---|
| Storyblok Nuxt 3 module docs | https://github.com/storyblok/storyblok-nuxt |
| Storyblok Vue 3 docs | https://github.com/storyblok/storyblok-vue/tree/next |
| Nuxt v3 page | https://v3.nuxtjs.org/ |
