Merge pull request #11 from alexjoverm/next

Plugin code for Vue.js version 3

README.md

@@ -30,41 +30,41 @@
   </a>
 </p>
 
-**Note**: This plugin is for Vue 2. [Check out the @next version for Vue 3](https://github.com/storyblok/storyblok-vue/tree/next)
+**Note**: This plugin is for Vue 3. [Check out the docs for Vue 2 version](https://github.com/storyblok/storyblok-vue/tree/master)
 
 ## 🚀 Usage
 
 > If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) guide to get a project ready in less than 5 minutes.
 
 ### Installation
 
-Install `@storyblok/vue`:
+Install `@storyblok/vue@next`:
 
 ```bash
-npm install --save-dev @storyblok/vue
-// yarn add -D @storyblok/vue
+npm install --save-dev @storyblok/vue@next
+// yarn add -D @storyblok/vue@next
 ```
 
 Register it globally on your application (usually in `main.js`):
 
 ```js
-import Vue from "vue";
+import { createApp } from "vue";
 import StoryblokVue from "@storyblok/vue";
+import App from "./App.vue";
 
-Vue.use(StoryblokVue);
+const app = createApp(App);
+app.use(StoryblokVue);
 ```
 
 #### From a CDN
 
 Install the file from the CDN:
 
 ```html
-<script src="https://unpkg.com/@storyblok/vue"></script>
+<script src="https://unpkg.com/@storyblok/vue@next"></script>
 ```
 
-That's it, the plugin is auto-registered for you 😉.
-
-### Getting Started
+### Getting started
 
 For every component you've defined in your Storyblok space, add the `v-editable` directive with the blok content:
 
@@ -76,11 +76,11 @@ For every component you've defined in your Storyblok space, add the `v-editable`
 
 Where `blok` is the actual blok data coming from [Storblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue).
 
-Check out the [playground](/../../tree/master/playground) for a full example.
+Check out the [playground](/../../tree/next/playground) for a full example.
 
 ### Compatibility
 
-This plugin is for Vue 2. Thus, it supports the [same browsers as Vue 2](https://vuejs.org/v2/guide/installation.html#Compatibility-Note).
+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.
 
 ## 🔗 Related Links
 

lib/cypress/component/index.spec.js

@@ -5,7 +5,7 @@ import StoryblokVue from "@storyblok/vue";
 describe("@storyblok/vue", () => {
   beforeEach(() => {
     mount(Demo, {
-      extensions: {
+      global: {
         plugins: [StoryblokVue],
       },
     });

lib/index.js

@@ -6,39 +6,25 @@ const addClass = (el, className) => {
   }
 };
 
-function install(Vue) {
-  Vue.directive("editable", {
-    bind: function (el, binding) {
-      if (
-        typeof binding.value._editable === "undefined" ||
-        binding.value._editable === null
-      ) {
-        return;
-      }
+export default {
+  install: (app) => {
+    app.directive("editable", {
+      beforeMount(el, binding) {
+        if (binding.value) {
+          const node = binding.value._editable;
+          if (typeof node === "undefined" || node === null) return;
 
-      var options = JSON.parse(
-        binding.value._editable
-          .replace("<!--#storyblok#", "")
-          .replace("-->", "")
-      );
+          const cleared = node
+            .replace("<!--#storyblok#", "")
+            .replace("-->", "");
+          const options = JSON.parse(cleared);
 
-      el.setAttribute("data-blok-c", JSON.stringify(options));
-      el.setAttribute("data-blok-uid", options.id + "-" + options.uid);
+          el.setAttribute("data-blok-c", JSON.stringify(options));
+          el.setAttribute("data-blok-uid", options.id + "-" + options.uid);
 
-      addClass(el, "storyblok__outline");
-    },
-  });
-
-  if (
-    typeof window !== "undefined" &&
-    typeof window.storyblok !== "undefined"
-  ) {
-    Vue.prototype.$storyblok = window.storyblok;
-  }
-}
-
-if (typeof window !== "undefined" && window.Vue) {
-  window.Vue.use(install);
-}
-
-export default install;
+          addClass(el, "storyblok__outline");
+        }
+      },
+    });
+  },
+};

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/vue",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Storyblok directive for get editable elements.",
   "main": "./dist/storyblok-vue.umd.js",
   "module": "./dist/storyblok-vue.es.js",
@@ -25,30 +25,30 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@cypress/vite-dev-server": "^2.0.7",
-    "@cypress/vue": "^2.2.3",
+    "@cypress/vue": "^3.0.3",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/babel-preset-app": "^4.5.13",
-    "@vue/test-utils": "^1.2.2",
+    "@vue/compiler-sfc": "^3.2.1",
+    "@vue/test-utils": "next",
     "babel-jest": "^26.6.3",
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^25.2.4",
     "jest": "^26.6.3",
     "vite": "^2.4.4",
-    "vue": "^2.6.14",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "babel": {
-    "presets": [
-      "@vue/babel-preset-app"
-    ]
+    "vue": "^3.0.0",
+    "vue-jest": "next"
   },
   "eslintConfig": {
     "env": {
       "node": true
     }
   },
+  "babel": {
+    "presets": [
+      "@vue/babel-preset-app"
+    ]
+  },
   "jest": {
     "moduleFileExtensions": [
       "js",