Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@storyblok/vue

Package Overview
Dependencies
Maintainers
5
Versions
68
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storyblok/vue - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/storyblok-vue.es.js
dist/storyblok-vue.umd.js

27

package.json
{
"name": "@storyblok/vue",
"version": "2.1.1",
"version": "2.1.2",
"description": "Storyblok directive for get editable elements.",
"main": "./dist/storyblok-vue.js",
"module": "./dist/storyblok-vue.mjs",
"main": "./dist/storyblok-vue.umd.js",
"module": "./dist/storyblok-vue.es.js",
"files": [

@@ -12,4 +12,4 @@ "dist"

".": {
"import": "./dist/storyblok-vue.mjs",
"require": "./dist/storyblok-vue.js"
"import": "./dist/storyblok-vue.es.js",
"require": "./dist/storyblok-vue.umd.js"
}

@@ -26,8 +26,5 @@ },

},
"dependencies": {
"@storyblok/js": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@cypress/vite-dev-server": "^2.2.2",
"@cypress/vite-dev-server": "^2.0.7",
"@cypress/vue": "^2.2.3",

@@ -38,3 +35,3 @@ "@vitejs/plugin-vue": "^1.3.0",

"babel-jest": "^26.6.3",
"cypress": "^9.3.1",
"cypress": "^8.3.0",
"eslint-plugin-cypress": "^2.12.1",

@@ -78,2 +75,3 @@ "eslint-plugin-jest": "^25.2.4",

"author": "Alexander Feiglstorfer",
"license": "MIT",
"bugs": {

@@ -86,8 +84,9 @@ "url": "https://github.com/storyblok/storyblok-vue/issues"

"master",
"next"
{
"name": "next",
"channel": "next",
"prerelease": "beta"
}
]
},
"publishConfig": {
"access": "public"
}
}

180

README.md

@@ -8,3 +8,3 @@ <div align="center">

Vue plugin to make any <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue" target="_blank">Storyblok</a> component editable with a simple <code>v-editable</code> directive.
</p>
</p>
<br />

@@ -15,3 +15,3 @@ </div>

<a href="https://npmjs.com/package/@storyblok/vue">
<img src="https://img.shields.io/npm/v/@storyblok/vue/latest.svg?style=flat-square" alt="Storyblok Vue" />
<img src="https://img.shields.io/npm/v/@storyblok/vue/latest.svg?style=flat-square" alt="Storyblok JS Client" />
</a>

@@ -35,3 +35,3 @@ <a href="https://npmjs.com/package/@storyblok/vue" rel="nofollow">

**Note**: This plugin is for Vue 2. [Check out the docs for Vue 3 version](https://github.com/storyblok/storyblok-vue/tree/next).
**Note**: This plugin is for Vue 2. [Check out the @next version for Vue 3](https://github.com/storyblok/storyblok-vue/tree/next)

@@ -44,51 +44,21 @@ ## 🚀 Usage

Install `@storyblok/vue`
Install `@storyblok/vue`:
```bash
npm install --save-dev @storyblok/vue
# yarn add -D @storyblok/vue
// yarn add -D @storyblok/vue
```
Register the plugin on your application (usually in `main.js`), add the `apiPlugin` and add the [access token](https://www.storyblok.com/docs/api/content-delivery#topics/authentication?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) of your Storyblok space:
Register it globally on your application (usually in `main.js`):
```js
import Vue from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue";
import App from "./App.vue";
import StoryblokVue from "@storyblok/vue";
Vue.use(StoryblokVue, {
accessToken: "<your-token>",
use: [apiPlugin],
});
Vue.use(StoryblokVue);
```
That's it! All the features are enabled for you: the _Api Client_ for interacting with [Storyblok CDN API](https://www.storyblok.com/docs/api/content-delivery#topics/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue), and _Storyblok Bridge_ for [real-time visual editing experience](https://www.storyblok.com/docs/guide/essentials/visual-editor?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue).
> You can enable/disable some of these features if you don't need them, so you save some KB. Please read the "Features and API" section
#### Composition API
Install [@vue/composition-api](https://github.com/vuejs/composition-api) and register it in the application:
```js
// main.js
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
```
To use **script setup**, install [unplugin-vue2-script-setup](https://github.com/antfu/unplugin-vue2-script-setup). Depending on your setup, the configuration is different. For example, in Vite:
```js
// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";
import ScriptSetup from "unplugin-vue2-script-setup/vite";
export default {
plugins: [createVuePlugin(), ScriptSetup()],
};
```
#### From a CDN
Install the file from the CDN and access the methods via `window.storyblokVue`:
Install the file from the CDN:

@@ -99,60 +69,6 @@ ```html

### Getting started
That's it, the plugin is auto-registered for you 😉.
`@storyblok/vue` does three actions when you initialize it:
### Getting Started
- Provides a `storyblokApi` object in your app, which is an instance of [storyblok-js-client](https://github.com/storyblok/storyblok-js-client)
- Loads [Storyblok Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) for real-time visual updates
- Provides a `v-editable` directive to link editable components to the Storyblok Visual Editor
#### 1. Fetching Content
Inject `storyblokApi` when using Composition API:
```html
<template>
<div>
<p v-for="story in stories" :key="story.id">{{ story.name }}</p>
</div>
</template>
<script setup>
import { useStoryblokApi } from "@storyblok/vue";
const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
</script>
```
> Note: you can skip using `apiPlugin` if you prefer your own method or function to fetch your data.
#### 2. Listen to Storyblok Visual Editor events
Use `useStoryBridge` to get the new story every time is triggered a `change` event from the Visual Editor. You need to pass the story id as first param, and a callback function as second param to update the new story:
```html
<script setup>
import { onMounted } from "vue";
import { useStoryblokBridge, useStoryblokApi } from "@storyblok/vue";
const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
const state = reactive({ story: data.story });
onMounted(() => {
useStoryblokBridge(state.story.id, story => (state.story = story));
});
</script>
```
You can pass [Bridge options](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) as a third parameter as well:
```js
useStoryblokBridge(state.story.id, (story) => (state.story = story), {
resolveRelations: ["Article.author"],
});
```
#### 3. Link your components to Storyblok Visual Editor
For every component you've defined in your Storyblok space, add the `v-editable` directive with the blok content:

@@ -168,73 +84,7 @@

Check out the [playground](/../../tree/master/playground-vca) for a full example.
Check out the [playground](/../../tree/master/playground) for a full example.
### Options API
You can use Options API as well, accessing the api client via `this.$storyblokApi`:
```js
import { useStoryblokBridge } from "@storyblok/vue";
export default {
data: () => ({
story: [],
}),
async created() {
const { data } = this.$storyblokApi.get(/* ... */);
this.story = data.story;
},
mounted() {
useStoryblokBridge(this.story.id, (evStory) => (this.story = evStory));
},
};
```
### Features and API
You can **choose the features to use** when you initialize the plugin. In that way, you can improve Web Performance by optimizing your page load and save some bytes.
#### Storyblok API
You can use an `apiOptions` object. This is passed down to the (storyblok-js-client config object](https://github.com/storyblok/storyblok-js-client#class-storyblok):
```js
app.use(StoryblokVue, {
accessToken: "<your-token>",
apiOptions: {
//storyblok-js-client config object
cache: { type: "memory" },
},
use: [apiPlugin],
});
```
If you prefer to use your own fetch method, just remove the `apiPlugin` and `storyblok-js-client` won't be added to your application.
```js
app.use(StoryblokVue);
```
#### Storyblok Bridge
You can conditionally load it by using the `bridge` option. Very useful if you want to disable it in production:
```js
app.use(StoryblokVue, {
bridge: process.env.NODE_ENV !== "production",
});
```
Keep in mind you have still access to the raw `window.StoryblokBridge`:
```js
const sbBridge = new window.StoryblokBridge(options);
sbBridge.on(["input", "published", "change"], (event) => {
// ...
});
```
### Compatibility
This plugin is for Vue 3. Thus, it supports the [same browsers as Vue 3](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). In short: all modern browsers, dropping IE support.
This plugin is for Vue 2. Thus, it supports the [same browsers as Vue 2](https://vuejs.org/v2/guide/installation.html#Compatibility-Note).

@@ -258,1 +108,5 @@ ## 🔗 Related Links

This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
### License
This repository is published under the [MIT](./LICENSE) license.
dist/storyblok-vue.js
dist/storyblok-vue.mjs
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc