gridstack-vuejs-learnings

Andys gridstack.js demos and examples for learning how to use gridstack.js with Vue.js

Learn about GridStack at https://gridstackjs.com/

Installation

This is a vite + vue3 project.

You can install this package via npm:

npm install

Usage

npm run dev

and visit http://localhost:5173/

The Demos

• <GridStackDemo1 />
• <GridStackDemo2 />
• <GridStackDemo3Two /> - My port of the original gridstack official demo demo/two.html to Vue.js
• <GridStackDemo4TwoVue />- this was the breakthrough demo where I learned how to use Vue with gridstack.js via two techniques.
• <GridStackDemo5MyPullRequest /> - this one is a pull request to the gridstack.js project. See gridstack/gridstack.js#2905

Only enable one component at a time in src/App.js to see the demo in action. If you enable more than one, the last one will be the one that is rendered and it gets confusing.

Screenshots

ProblemDemo3GridStackDemo8

The Problem: ❌ The User interaction of moving a widget, or calling update() to programmatically move a widget, doesn't trigger the computed selectedGridStackNode to re-run because the gridstack object is not reactive. Thus we don't see the x, y, id of the selectedGridStackNode update in the UI.

Solutions found.

GridStackDemo6

GridStackDemo5MyPullRequest

Also available on StackBlitz as a live demo: https://stackblitz.com/edit/vitejs-vite-phhdkeju

See pull request gridstack/gridstack.js#2905

GridStackDemo4TwoVue

GridStackDemo3Two

GridStackDemo2

GridStackDemo1