https://github.com/blokwise/blok
Dynamically load components from storyblok blok schemes in a nuxt.js project.
https://github.com/blokwise/blok
nuxt nuxt-components nuxt-module nuxtjs storyblok
Last synced: about 1 month ago
JSON representation
Dynamically load components from storyblok blok schemes in a nuxt.js project.
- Host: GitHub
- URL: https://github.com/blokwise/blok
- Owner: blokwise
- License: mit
- Created: 2020-11-17T22:39:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-30T07:19:25.000Z (over 2 years ago)
- Last Synced: 2024-10-19T07:04:56.732Z (7 months ago)
- Topics: nuxt, nuxt-components, nuxt-module, nuxtjs, storyblok
- Language: Vue
- Homepage: https://blok.blokwise.io
- Size: 1.33 MB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @blokwise/blok
Read the official [docs](https://blok.blokwise.io)
## Installation
Add `@blokwise/blok` dependency to your project:
```bash
yarn add @blokwise/blok
```
```bash
npm install @blokwise/blok
```
Then, add `@blokwise/blok` to the `modules` section of `nuxt.config.js`:
```js[nuxt.config.js]
{
modules: [
[
"@blokwise/blok",
{ prefix: "awesome" }
]
],
}
```
## Options
### `prefix`
- Type: `String`
- Default: `''`
The `prefix` can be used to define prefix for the component name. e.g. if prefixed with `'awesome'` the component can be used as `AwesomeBlok`.
Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.
## Usage
Use the `Blok` component to load components according to storyblok schemas:
```vue
export default {
data() {
return {
// this is one blok schema
blok: {
_uid: "10a9f451-4e30-47e1-ba7a-08d3ac8b3fbe",
component: "Logo",
image: {
filename: "logo.svg",
},
},
};
},
};
```
The `Blok` component searches for a loader related to `blok.component` property. If there exists an additional prefix to the component name which is defined in the schema, it can be passed. If there is no prefix provided, it automatically searches for all possible components, with one of the existing prefixes used to load components through `@nuxt/components`.
## Props
### `blok`
- type: `Object|BlokSchema`,
- default: `() => ({})`
The `Blok` lazily loads a dynamic component based on the `blok.component` property.
Every property of the `blok` Object will be searched for possible child blok schema entries. If found, the component renders recursively into a `slot` with the name of respective property.
### `hydration`
- type: `String`,
- default: `'WhenIdle'`
- options: `'WhenIdle'`, `'WhenVisible'`, `'OnInteraction'`, `'Never'`
The `hydration` prop controls how to the component will be hydrated. The hydration will be done with `vue-lazy-hydration` thanks to Markus Oberlehner.