@storyblok/vue

@storyblok/vue

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

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

🚀 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@next:

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

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

import { createApp } from "vue";
import StoryblokVue from "@storyblok/vue";
import App from "./App.vue";

const app = createApp(App);
app.use(StoryblokVue);

From a CDN

Install the file from the CDN:

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

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 3. Thus, it supports the same browsers as Vue 3. In short: all modern browsers, dropping IE support.

🔗 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.