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

📖 Release Notes

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
    }]
  ]
}

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

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

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

• Default: 'published'

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

• Default: 'pages'

Optional. Directory where all Content Types are loaded from.

• Default: ''

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

• Default: []

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

• 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
    }
  }
}

• Default: false

Optional. Disables the module.

• 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.

• 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.

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

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.

// pages/PageGeneric.vue

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

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

    return {
      story
    }
  }
}
</script>

// 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>

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 }
  ]
})

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

MIT License

Copyright (c) WONDROUS LTD