-
Vue 2
+
+
Vue 3
Open DevTools and inspect this <div>. You should see a
- data-blok-c
- and
- data-blok-uid
- attrs.
+ data-blok-c and data-blok-uid attrs.
-
diff --git a/playground/main.js b/playground/main.js
index cf63c0f..64af757 100644
--- a/playground/main.js
+++ b/playground/main.js
@@ -1,11 +1,7 @@
-import Vue from "vue";
+import { createApp } from "vue";
import StoryblokVue from "@storyblok/vue";
import App from "./App.vue";
-Vue.config.productionTip = false;
-
-Vue.use(StoryblokVue);
-
-new Vue({
- render: (h) => h(App),
-}).$mount("#app");
+const app = createApp(App);
+app.use(StoryblokVue);
+app.mount("#app");
diff --git a/playground/package.json b/playground/package.json
index 083f495..67bb039 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -5,10 +5,10 @@
"demo": "vite"
},
"devDependencies": {
- "@storyblok/vue": "^2.0.0",
+ "@storyblok/vue": "^3.0.0",
+ "@vitejs/plugin-vue": "^1.3.0",
+ "@vue/compiler-sfc": "^3.0.5",
"vite": "^2.4.4",
- "vite-plugin-vue2": "^1.8.0",
- "vue": "^2.6.14",
- "vue-template-compiler": "^2.6.14"
+ "vue": "^3.0.5"
}
}
diff --git a/playground/vite.config.js b/playground/vite.config.js
index cded305..0a8bd80 100644
--- a/playground/vite.config.js
+++ b/playground/vite.config.js
@@ -1,7 +1,7 @@
import { defineConfig } from "vite";
-import { createVuePlugin } from "vite-plugin-vue2";
+import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [createVuePlugin()],
+ plugins: [vue()],
});
diff --git a/v1/example/example.html b/v1/example/example.html
deleted file mode 100644
index 427fa92..0000000
--- a/v1/example/example.html
+++ /dev/null
@@ -1,86 +0,0 @@
-
-
-
-
-
-
StoryBlok - Demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/v1/vue1/storyblok-vue.js b/v1/vue1/storyblok-vue.js
deleted file mode 100644
index 83ab25c..0000000
--- a/v1/vue1/storyblok-vue.js
+++ /dev/null
@@ -1,39 +0,0 @@
-(function () {
- var addClass = function (el, className) {
- if (el.classList) {
- el.classList.add(className);
- } else if (!new RegExp("\\b" + className + "\\b").test(el.className)) {
- el.className += " " + className;
- }
- };
-
- function install(Vue) {
- Vue.directive("editable", {
- update: function (value) {
- if (typeof value._editable === "undefined") {
- return;
- }
-
- var options = JSON.parse(
- value._editable.replace("", "")
- );
-
- this.el.setAttribute("data-blok-c", JSON.stringify(options));
- this.el.setAttribute("data-blok-uid", options.id + "-" + options.uid);
-
- addClass(this.el, "storyblok__outline");
- },
- });
- }
- /* eslint-disable */
- if (typeof exports == "object") {
- module.exports = install;
- } else if (typeof define == "function" && define.amd) {
- define([], function () {
- return install;
- });
- /* eslint-enable */
- } else if (window.Vue) {
- window.Vue.use(install);
- }
-})();