@wearewondrous/nuxt-storyblok-queries

1.2.14 • Public • Published

Nuxt Storyblok Queries

NPM CircleCI Standard JS

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

Readme

Keywords

none

Package Sidebar

Install

npm i @wearewondrous/nuxt-storyblok-queries

Weekly Downloads

45

Version

1.2.14

License

MIT

Unpacked Size

30.9 kB

Total Files

39

Last publish

Collaborators

  • yobottehg
  • webermario
  • tassilogroeper
  • seralichtenhahn
  • mirko-kienle
  • mirkopoloni
  • mahapo