Add Vue.js example

tobias-grasse · web-flow · commit cc8f2287a601 · 2020-09-21T08:18:32.000+02:00
Adds a basic example of how to integrate GridStack with a Vue.js app. This demo requires a modestly modern browser, but Vue has a legacy build mode when using single file components with Vue CLI.
diff --git a/demo/vuejs.html b/demo/vuejs.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gridstack.js Vue integration example</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/gridstack@2.0.0/dist/gridstack.min.css"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.0/dist/gridstack.all.js"></script>
+    <style>
+      .grid-stack {
+        background: #fafad2;
+      }
+      .grid-stack-item-content {
+        color: #2c3e50;
+        text-align: center;
+        background-color: #18bc9c;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="app">
+      <h1>How to integrate GridStack.js with Vue.js</h1>
+      <p>
+        As with any virtualDOM-based framework, you need to check if Vue has
+        rendered the DOM (or any updates to it) <strong>before</strong> you
+        initialize GridStack or call its methods. As a basic example, check this
+        component's <code>mounted</code> hook.
+      </p>
+      <p>
+        If your app requires more complex render logic than the inline template
+        in `addWidget`, consider
+        <a
+          href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel"
+          >makeWidget</a
+        >
+        to let Vue deal with DOM rendering.
+      </p>
+      <p>{{ info }}</p>
+      <button type="button" @click="addNewWidget()">Add Widget</button>
+      <section class="grid-stack"></section>
+    </main>
+    <script type="module">
+      import Vue from "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js";
+
+      let app = new Vue({
+        el: "#app",
+        data: {
+          // Reference to the GridStack instance to access it later
+          grid: undefined,
+          count: 0,
+          info: "",
+          timerId: undefined,
+        },
+        items: [
+          { x: 2, y: 1, width: 1, height: 2 },
+          { x: 2, y: 4, width: 3, height: 1 },
+          { x: 4, y: 2, width: 1, height: 1 },
+          { x: 3, y: 1, width: 1, height: 2 },
+          { x: 0, y: 6, width: 2, height: 2 },
+        ],
+        watch: {
+          /**
+           * Clear the info text after a two second timeout. Clears previous timeout first.
+           */
+          info: function (newVal, oldVal) {
+            if (newVal.length === 0) return;
+
+            window.clearTimeout(this.timerId);
+            this.timerId = window.setTimeout(() => {
+              this.info = "";
+            }, 2000);
+          },
+        },
+        mounted: function () {
+          // Provides access to the GridStack instance across the Vue component.
+          this.grid = GridStack.init({ float: true });
+
+          // Use an arrow function so that `this` is bound to the Vue instance. Alternatively, use a custom Vue directive on the `.grid-stack` container element: https://vuejs.org/v2/guide/custom-directive.html
+          this.grid.on("dragstop", (event, element) => {
+            const node = event.target.gridstackNode;
+            // `this` will only access your Vue instance if you used an arrow function, otherwise `this` binds to window scope. see https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
+            this.info = `You just dragged node #${node.id} to x${node.x} y${node.y} – good job!`;
+          });
+        },
+        methods: {
+          addNewWidget: function () {
+            const node = this.$options.items[this.count] || {
+              x: Math.round(12 * Math.random()),
+              y: Math.round(5 * Math.random()),
+              width: Math.round(1 + 3 * Math.random()),
+              height: Math.round(1 + 3 * Math.random()),
+            };
+            this.count++;
+            this.grid.addWidget(
+              `<div><div class="grid-stack-item-content">${this.count}</div></div>`,
+              { id: this.count, ...node }
+            );
+          },
+        },
+      });
+    </script>
+  </body>
+</html>
