Combining Gridstack.js with Vue 3 components

Question

Combining Gridstack.js with Vue 3 components

I'm currently working on setting up a gridstack.js dashboard using Vue 3 and I am looking to have the grid stack items incorporate dynamic vue 3 components.

The issue arises where these grid stack items can only accept HTML content. Even though the documentation suggests that you can include Vue components as content, the provided examples pertain to Vue 2, making it challenging for me to implement this in Vue 3.

Below is the code snippet I am working with:

<template>
    <div class="p-6 h-full flex flex-col">

        <header class="flex flex-row items-center justify-between mb-6">
            <div>
                <h1 class="text-3xl font-bold">
                    Workbench
                </h1>
                <p class="leading-6 text-gray-600 text-sm mt-2">
                    {{ info }}
                </p>
            </div>
            <div class="flex flex-row items-center">
                <button type="button" @click="addPanel()">Add Panel</button>
            </div>
        </header>

        <div class="flex-1">
            <section class="grid-stack"></section>
        </div>

    </div>
</template>

<script setup>

    import { ref, onMounted, defineComponent, createApp } from "vue"

    import TestPanel from "./../components/panels/TestPanel.vue"

    let grid = null;

    const items = [
        { x: 0, y: 0, h: 4, w: 6 },
        { x: 7, y: 0, h: 4, w: 6 },
        { x: 0, y: 5, h: 4, w: 4 },
        { x: 4, y: 5, h: 4, w: 4 },
        { x: 8, y: 5, h: 4, w: 4 },
    ];

    onMounted(() => {

        grid = GridStack.init({
            // float: true,
            cellHeight: "70px",
            minRow: 1,
        });

        grid.load(items)

    });

    function addPanel() {

        const div = document.createElement("div")
        div.id = Math.random().toString(24).substring(8)

        const componentInstance = defineComponent({
            extends: TestPanel, data() {
                return {
                    test: "this is a test"
                }
            }
        })

        const app = createApp(componentInstance)

        app.mount(div)

        let widget = grid.addWidget({
            x: 0,
            y: 0,
            w: 6,
            h: 3,
            content: div.outerHTML,
        })

        app.mount(div.id)
    }

</script>

<style>
    .grid-stack-item-content {
        background-color: #18BC9C;
    }
</style>

Although this approach successfully loads the vue component within a stack grid item, the reactivity of the component is lost.

If anyone could provide assistance, it would be greatly appreciated. Thank you in advance!

javascript vue.js vuejs3

Answer 1

Answer №1

I took a unique approach that may not align with the intentions of the gridstack creators, but here is my solution:

<template>
  <button @click="addNewWidget()">Add Widget</button> {{ info }}

  <section class="grid-stack">
    <div 
      v-for="(component, key, index) in components" 
      :key="'component'+index" 
      :gs-id="key" 
      class="grid-stack-item"
      :gs-x="component.gridPos.x" 
      :gs-y="component.gridPos.y" 
      :gs-h="component.gridPos.h" 
      :gs-w="component.gridPos.w"
      gs-auto-position="true"
    >
      <div class="grid-stack-item-content">
        <component :is="component.name" v-bind="component.props" />
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted, reactive, nextTick } from 'vue';
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import YourCustomComponent1 from '../YourCustomComponent1.vue';
import YourCustomComponent2 from '../YourCustomComponent2.vue';
import YourCustomComponent3 from '../YourCustomComponent3.vue';

export default {
  name: "WidgetGrid",
  setup() {
    let info = ref("");
    let grid = null;

    let components = reactive({
      yourCustomComponent1: {
        name: "YourCustomComponent1", props: {}, gridPos: { x: 0, y: 1, w: 4, h: 5 }
      },
      yourCustomComponent2: {
        name: "YourCustomComponent2", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
      },
    });

    onMounted(() => {
      grid = GridStack.init({
        float: true,
        cellHeight: "70px",
        minRow: 1,
      });

      grid.on("dragstop", (event, element) => {
        console.log("move event!", event, element);
		const node = element.gridstackNode;
		info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
      });
    });

    function addNewWidget() {
      components.yourCustomComponent3= {
		name: "YourCustomComponent3", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
	  };
	  nextTick(() => {
	    console.log(grid);
		let compEl = document.querySelector('[gs-id="yourCustomComponent3"]');
		console.log(compEl);
		grid.makeWidget(compEl);
      });
	  console.warn("i will only work once, fix my inputs to reuse me");
	}

	return {
	  info,
	  components,
	};
  },
  components: {
    YourCustomComponent1,
    YourCustomComponent2,
  },
}
</script>

<style>
.grid-stack {
  background-color: #FAFAFF;
  border-style: dashed;
}

.grid-stack-item {
  color: #2c3e50;
  text-align: center;
  border-style: solid;
  overflow: auto;
  z-index: 50;
}
</style>

In my scenario, the absence of a div with the grid-stack-item-content class surrounding the component caused the widgets to be fixed in place. I also included an add-new-widget function as an example of how to incorporate a new widget into the grid. Utilizing reactive() ensures Vue triggers a page re-render. After rendering, the component must be registered as a grid item using grid.makeWidget. This process requires the component's DOM element, obtainable post-renders through nextTick.

Answer 2

I took a unique approach that may not align with the intentions of the gridstack creators, but here is my solution:

<template>
  <button @click="addNewWidget()">Add Widget</button> {{ info }}

  <section class="grid-stack">
    <div 
      v-for="(component, key, index) in components" 
      :key="'component'+index" 
      :gs-id="key" 
      class="grid-stack-item"
      :gs-x="component.gridPos.x" 
      :gs-y="component.gridPos.y" 
      :gs-h="component.gridPos.h" 
      :gs-w="component.gridPos.w"
      gs-auto-position="true"
    >
      <div class="grid-stack-item-content">
        <component :is="component.name" v-bind="component.props" />
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted, reactive, nextTick } from 'vue';
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import YourCustomComponent1 from '../YourCustomComponent1.vue';
import YourCustomComponent2 from '../YourCustomComponent2.vue';
import YourCustomComponent3 from '../YourCustomComponent3.vue';

export default {
  name: "WidgetGrid",
  setup() {
    let info = ref("");
    let grid = null;

    let components = reactive({
      yourCustomComponent1: {
        name: "YourCustomComponent1", props: {}, gridPos: { x: 0, y: 1, w: 4, h: 5 }
      },
      yourCustomComponent2: {
        name: "YourCustomComponent2", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
      },
    });

    onMounted(() => {
      grid = GridStack.init({
        float: true,
        cellHeight: "70px",
        minRow: 1,
      });

      grid.on("dragstop", (event, element) => {
        console.log("move event!", event, element);
		const node = element.gridstackNode;
		info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
      });
    });

    function addNewWidget() {
      components.yourCustomComponent3= {
		name: "YourCustomComponent3", props: {}, gridPos: { x: 0, y: 1, w: 2, h: 5 }
	  };
	  nextTick(() => {
	    console.log(grid);
		let compEl = document.querySelector('[gs-id="yourCustomComponent3"]');
		console.log(compEl);
		grid.makeWidget(compEl);
      });
	  console.warn("i will only work once, fix my inputs to reuse me");
	}

	return {
	  info,
	  components,
	};
  },
  components: {
    YourCustomComponent1,
    YourCustomComponent2,
  },
}
</script>

<style>
.grid-stack {
  background-color: #FAFAFF;
  border-style: dashed;
}

.grid-stack-item {
  color: #2c3e50;
  text-align: center;
  border-style: solid;
  overflow: auto;
  z-index: 50;
}
</style>

In my scenario, the absence of a div with the grid-stack-item-content class surrounding the component caused the widgets to be fixed in place. I also included an add-new-widget function as an example of how to incorporate a new widget into the grid. Utilizing reactive() ensures Vue triggers a page re-render. After rendering, the component must be registered as a grid item using grid.makeWidget. This process requires the component's DOM element, obtainable post-renders through nextTick.

Answer 3

Answer №2

You can integrate your own component in Vue3 by following these steps:

<div class="grid-container" :style="{ 'background-color': colorCode }">
    <custom-widget v-for="widget in widgetList" :widgetData="widget" :key="widget.id" />
</div>

First, import your custom component:

import CustomWidget from "src/components/CustomGridComponent.vue";

Next, add the component to the export section of your script:

export default {
  name: 'GridContainer',
  components: {
    CustomWidget
  },
  data() {
   ...
  },
  ...
}

That's it! Your final result will resemble something like this:

https://example.com/custom-component-preview.png

Answer 4

You can integrate your own component in Vue3 by following these steps:

<div class="grid-container" :style="{ 'background-color': colorCode }">
    <custom-widget v-for="widget in widgetList" :widgetData="widget" :key="widget.id" />
</div>

First, import your custom component:

import CustomWidget from "src/components/CustomGridComponent.vue";

Next, add the component to the export section of your script:

export default {
  name: 'GridContainer',
  components: {
    CustomWidget
  },
  data() {
   ...
  },
  ...
}

That's it! Your final result will resemble something like this:

https://example.com/custom-component-preview.png

Combining Gridstack.js with Vue 3 components

Answer №1

Answer №2

Similar questions

Implementing validation and displaying fields with v-model in vue.js

Is there a method to prevent data loss on page refresh by persisting data stored in a database?

Utilize jQuery's addClass Method when Submitting a Form Using Ajax

The data visualization tool Highchart is struggling to load

Creating distinct short identifiers across various servers

Tomcat hosting a dynamic duo: Spring Boot and React!

What is the method for getting js_xlsx to include all empty headers while saving the file?

The onchange functionality is not functioning as expected

Images obscure dropdown menu

Having trouble getting the group hover animation to function properly in Tailwind CSS

What is the best way to achieve a sleek and seamless scrolling effect on a webpage?

Having trouble with the backspace key on mobile devices?

Running the command "npm install [package]" does not automatically update the package.json file

Retrieving content dynamically using ajax

Warning: ComponentMounts has been renamed. Proceed with caution

Issue with innerHTML functionality within a div element

Utilizing Angular PrimeNG's range datepicker, you can select a date range spanning from January 31st to December 1st, 2023 within a reactive form. Take it a step further by calculating

Give priority to executing jQuery Ajax before running JavaScript

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

Execution failure of the passport.authenticate callback