Nuxt Storyblok Router

Nuxt.js module to use storyblok routes instead of pages/ directory

📖 Release Notes

Setup

1. Add the @wearewondrous/nuxt-storyblok-router dependency with yarn or npm to your project
2. Add @wearewondrous/nuxt-storyblok-router to the modules section of nuxt.config.js
3. Configure it:

{
  modules: [
    ['@wearewondrous/nuxt-storyblok-router', {
      // Module option here
    }]
  ]
}

Using top level options

{
  modules: [
    '@wearewondrous/nuxt-storyblok-router'
  ],
  storyblokRouter: [
    // Module options here
  ]
}

Options

accessToken

• Default: this.options.storyblok || ''

Access Token for the StoryBlok API. Not needed if you already have installed the Storyblok Nuxt.js module

version

• Default: 'published'

Version of the Storyblok Content. Use 'draft' for the preview Access Token.

contentTypeDir

• Default: 'pages'

Optional. Directory where all Content Types are loaded from.

defaultLanguage

• Default: ''

Optional. If your Storyblok Site has multiple languages, set defaultLanguage to the key of your Storyblok default language.

exclude

• Default: []

Optional. Array of pages which shoud not be rendered. (e.g. settings)

sitemap

• Default: false

Optional. Integration with the Nuxt Sitemap Module. Use a Object to configure the Module with Options

// nuxt.config.js
export default {
  storyblokRouter: {
    sitemap: {
      hostname: "domain.com",
      cacheTime: 10000000000
    }
  }
}

disabled

• Default: false

Optional. Disables the module.

generateDefaultPaths

• Default: false

Optional. If your Storyblok Site has multiple languages and generateDefaultPaths is set, paths without language code will be generated for the default language. For example if 'defaultLanguage' is 'en', '/about' and '/en/about' will be generated.

useFallback

• Default: false

Optional. Adds explicit fallback to routes, needed for Storyblok live preview of newly created pages. Requires a fallback.vue file in your contentTypeDir.

Usage

When enabled, this module will disable the traditional Nuxt router. The Router file will be generated according to your Storyblok Routes.

Content Types

In Storyblok all pages need a Content Type.

1. Create a Content Type in Storyblok.
2. Create a Vue Component with the same name, which will act as a Content Type, in the pages/ directory. These Components have all the native nuxt featutes like asyncData, fetch, head, etc.

Tip: Use camelCase for the naming in Storyblok and PascalCase for your Component Naming.

Usage with nuxt-storyblok-queries (Recommended)

// pages/PageGeneric.vue

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

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

    return {
      story
    }
  }
}
</script>

Usage with storyblok-nuxt

// pages/PageGeneric.vue

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

<script>
export default {
  async asyncData({ app, route }) {
    const story = await app.$storyapi.get(`cdn/stories/${route.path}`)

    return {
      story
    }
  }
}
</script>

Languages

The Router will automaticly detect if you use multiple language. If you have multiple languages, the router will use an optional dynamic parameter on each route. The dynamic parameter is optional, so if no language is specified the default languag can be used.

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/:lang?/about', component: ContentType }
  ]
})

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) WONDROUS LTD