@storyblok/vue

Vue plugin to make any Storyblok component editable with a simple v-editable directive.

Note: This plugin is for Vue 2. Check out the @next version for Vue 3

🚀 Usage

If you are first-time user of the Storyblok, read the Getting Started guide to get a project ready in less than 5 minutes.

Installation

Install @storyblok/vue:

npm install --save-dev @storyblok/vue
// yarn add -D @storyblok/vue

Register it globally on your application (usually in main.js):

import Vue from "vue";
import StoryblokVue from "@storyblok/vue";

Vue.use(StoryblokVue);

From a CDN

Install the file from the CDN:

<script src="https://unpkg.com/@storyblok/vue"></script>

That's it, the plugin is auto-registered for you 😉.

Getting Started

For every component you've defined in your Storyblok space, add the v-editable directive with the blok content:

<template>
  <div v-editable="blok"><!-- ... --></div>
</template>

Where blok is the actual blok data coming from Storblok's Content Delivery API.

Check out the playground for a full example.

Compatibility

This plugin is for Vue 2. Thus, it supports the same browsers as Vue 2.

🔗 Related Links

• Add a headless CMS to Vue.js in 5 minutes: Quick-start guide on getting up and running with Storyblok and Vue.
• Storyblok & Vue.js on GitHub: Check all of our Vue.js open source repos.
• Storyblok CLI: A simple CLI for scaffolding Storyblok projects and fieldtypes.

ℹ️ More Resources

Support

• Bugs or Feature Requests? Submit an issue.
• Do you have questions about Storyblok or you need help? Join our Discord Community.

Contributing

Please see our contributing guidelines and our code of conduct. This project use semantic-release for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check this question about it in semantic-release FAQ.

License

This repository is published under the MIT license.