Nuxt Storyblok Queries

Nuxt.js module to simplify queries to the Storyblok API

📖 Release Notes

Setup

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

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

Using top level options

{
  modules: [
    '@wearewondrous/nuxt-storyblok-queries'
  ],
  storyblokQueries: [
    // 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

cacheProvider

• Default: 'memory'

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

version

• Default: 'auto'

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

defaultLanguage

• Default: ''

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

Usage

This modules adds a simple API to query your Storyblok Content.

• $storyblok.getStory()
• $storyblok.getCurrentStory()
• $storyblok.getStoryCollection()
• $storyblok.getSettings()
• $storyblok.getCurrentSettings()
• $storyblok.getDatasource()

$storyblok.getStory(path, options)

Fetches the story by the given path. The Language gets automatically detected or can be specified in the options parameter.

export default {
  async asyncData({ $storyblok }) {
    const story = await $storyblok.getStory("home")

    return story
  }
}

with Options

export default {
  async asyncData({ $storyblok }) {
    const story = await $storyblok.getStory("home", {
      lang: "de"
    })

    return story
  }
}

$storyblok.getCurrentStory(options)

Fetches the story by the current Route. The Language gets automatically detected but can also be specified in the options parameter.

export default {
  async asyncData({ $storyblok, route }) {
    console.log(route.path) // -> /story
    const story = await $storyblok.getCurrentStory()

    return story
  }
}

with Options

export default {
  async asyncData({ $storyblok, route }) {
    console.log(route.path) // -> /story
    const story = await $storyblok.getCurrentStory({
      lang: "de"
    })

    return story
  }
}

$storyblok.getStoryCollection(path, options)

Fetches all Stories matching the given path. The Language gets automatically detected but can also be specified in the options parameter.

export default {
  async asyncData({ $storyblok, route }) {
    const collection = await $storyblok.getStoryCollection("blog")

    return collection
  }
}

with Options

export default {
  async asyncData({ $storyblok, route }) {
    const collection = await $storyblok.getStoryCollection("blog", {
      lang: "de",
      startpage: true // if true, startpage of collection gets fetched as well
    })

    return collection
  }
}

$storyblok.getSettings(lang, options)

Fetches the settings page of the given language. The path for the settings route can be specified in the options parameter or falls back to /settings.

export default {
  async asyncData({ $storyblok, route }) {
    const settings = await $storyblok.getSettings("de")

    return {
      //...
      settings
    }
  }
}

with Options

export default {
  async asyncData({ $storyblok, route }) {
    const settings = await $storyblok.getSettings("de", {
      path: "global"
    })

    return {
      //...
      settings
    }
  }
}

$storyblok.getCurrentSettings(options)

Fetches the settings page of the current language detected by the current route. The path for the settings route can be specified in the options parameter or falls back to /settings.

export default {
  async asyncData({ $storyblok, route }) {
    const settings = await $storyblok.getCurrentSettings()

    return {
      //...
      settings
    }
  }
}

with Options

export default {
  async asyncData({ $storyblok, route }) {
    const settings = await $storyblok.getCurrentSettings({
      path: "global"
    })

    return {
      //...
      settings
    }
  }
}

$storyblok.getDatasource(path)

Fetches the datasource by the given path.

export default {
  async asyncData({ $storyblok, route }) {
    const datasource = await $storyblok.getDatasource("users")

    return {
      //...
      datasource
    }
  }
}

$storyblok.renderRichText(richTextContent)

Renders the Storyblok richtext field content and returns an HTML string.

<div v-html="$storyblok.renderRichTest(story.content.rich_text)" />

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