JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/gridstack.css">
<script src="https://unpkg.com/[email protected]/dist/gridstack.all.js"></script>
<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>
  <button type="button" @click="addNewWidget()">Add Widget</button> {{ info }}
  <section class="grid-stack"></section>
</main>
<script type="module">
  import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js"

  createApp({
    data () {
      return {
        // 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,...

CSS

/* Optional styles for demos */
.btn-primary {
  color: #fff;
  background-color: #007bff;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1.5;
  border-radius: .25rem;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

.grid-stack {
  background: #FAFAD2;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}