Nuxt Storyblok Queries
Nuxt.js module to simplify queries to the Storyblok API
Setup
- Add the
@wearewondrous/nuxt-storyblok-queriesdependency withyarnornpmto your project - Add
@wearewondrous/nuxt-storyblok-queriesto themodulessection ofnuxt.config.js - 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
- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
License
Copyright (c) WONDROUS LTD