nujek/storyblok

Overview

The @nujek/storyblok packages will install some useful nuxt modules to quickstart your project. This will help your development workflow.

Installation

yarn add -D @nujek/storyblok

Usage

const storyblokConfig = {
    accessToken: process.env.SB_CLIENT_ACCESS_TOKEN, #  <- here we will use the SB Token from the .env file.
    cacheProvider: 'memory',
}

export default {
  buildModules: [
    [
      '@nujek/storyblok', { storyblokConfig: config, debug: true }
    ]
  ],
}

storyblok-nuxt

• Default: enabled
• Package: storyblok-nuxt

This is the official storyblok nuxt.js module to connect your app with storyblok cms.

Additionally it will inject $storyapi object which allows you to fetch stories e.g. from storyblok.

For listening to Visual Editor events you will need to use $storybridge which is documented here.

@marvr/storyblok-rich-text-vue-renderer

Vue.js plugin for rendering the rich-text content.

<SbRichtext :text="content" class="prose lg:prose-lg" />

Component: <SbRichtext/>

Package: @marvr/storyblok-rich-text-vue-renderer

Docs: rich-text-renderer Nuxtjs

@nujek/nuxt-storyblok-queries

Instead of $storyapi you could use nuxt-storyblok-queries. Which gives us a nice api to fetch data from storyblok.

• Default: removed since @nujek/storyblok version 0.0.104
• Package: @nujek/nuxt-storyblok-queries

Hint: This is a slightly modified version of nuxt-storyblok-queries module which has more features and support for storyblok management api

<template>
  <!-- Your template -->
</template>

<script>
export default {
  async asyncData({ $storyblok }) {
    const story = await $storyblok.getCurrentStory()

    return {
      story
    }
  }
}
</script>