@storyblok/nuxt-beta v2.2.0
⚠️ This module is still WIP ⚠️
As of right now, this module does not work in Nuxt 3. However, in the meantime you can easily integrate the official Storyblok Vue SDK @storyblok/vue
as a workaround by following the instructions hereinafter.
Live Demo
If you are in a hurry, we have provided this live demo of a Nuxt 3 app utilizing our Vue SDK for you on Stackblitz.
Installation
Install @storyblok/vue
:
npm install @storyblok/vue
# yarn add @storyblok/vue
Add the following code to nuxt.config.ts
.
import { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
components: {
global: true,
dirs: ['~/components/storyblok'],
},
});
Create a file plugins/storyblok.js
with the following content:
import { StoryblokVue, apiPlugin } from '@storyblok/vue';
import { defineNuxtPlugin } from '#app';
export default defineNuxtPlugin(({ vueApp }) => {
vueApp.use(StoryblokVue, {
accessToken: YOUR_ACCESS_TOKEN,
use: [apiPlugin],
});
});
Fetching Content from Storyblok
Create a file pages/index.vue
with the following content:
<script setup>
import { useStoryblok } from '@storyblok/vue';
const story = await useStoryblok('home', { version: 'draft' });
</script>
<template>
<StoryblokComponent v-if="story" :blok="story.content" />
</template>
This will load all the content of your home story defined in your Storyblok space. Moreover, the Storyblok Bridge to enable real-time editing is automatically enabled. You can find additional information about this as well as optional parameters in the @storyblok/vue
readme.
Adding Storyblok Components
For the <StoryblokComponent />
to work and do its magic, simply add all of your components to components/storyblok
. When creating a new Storyblok space, a Feature, Teaser, Grid and Page component are created for you, so let's add these to components/storyblok
.
Feature.vue
<template>
<div v-editable="blok" class="py-2" data-test="feature">
<h1 class="text-lg">{{ blok.name }}</h1>
</div>
</template>
<script setup>
defineProps({ blok: Object });
</script>
Teaser.vue
<template>
<div
v-editable="blok"
:cat="$attrs.cat"
class="py-8 mb-6 text-5xl font-bold text-center"
data-test="teaser"
>
{{ blok.headline }}
</div>
</template>
<script setup>
defineProps({ blok: Object });
</script>
Grid.vue
<template>
<div v-editable="blok" class="flex py-8 mb-6" data-test="grid">
<div v-for="blok in blok.columns" :key="blok._uid" class="flex-auto px-6">
<StoryblokComponent :blok="blok" />
</div>
</div>
</template>
<script setup>
defineProps({ blok: Object });
</script>
Page.vue
<template>
<div v-editable="blok" class="px-6" data-test="page">
<StoryblokComponent
v-for="blok in blok.body"
:key="blok._uid"
:blok="blok"
/>
</div>
</template>
<script setup>
defineProps({ blok: Object });
</script>
Final Steps
Now, all you have to do is delete app.vue
to allow your recently created pages/index.vue
to load.
If you run npm run dev
now, you should see your Storyblok content when visiting http://localhost:3000/
in your browser.