VUE - jquery.ui was not found

[seydx]

Subject of the issue

Hi all, I am trying to import "gridstack-dd-jqueryui" into my vue project as described in the readme, but I always get the error message that "jquery.ui" could not be found. What am I doing wrong?

Note:

With gridstack-dd-nativeeverything works, but i need the mobile touch support.

Your environment

OS: macOS v10.15.7
Gridstack version: v4.0.3
Browser: Google Chrome v89.0.4389.90
vue: v2.6.11

Steps to reproduce

import "gridstack/dist/gridstack.min.css";
import { GridStack } from "gridstack";
import "gridstack/dist/jq/gridstack-dd-jqueryui";

Expected behavior

Should find jquery.ui

Actual behavior

[Justin99b]

Same here
I tried to fix it but did not work
using Vue 3.x

[seydx]

Same here
I tried to fix it but did not work
using Vue 3.x

Which version? and how do u added it to your project?

[Justin99b]

I am using Vue CLI
vue 3.0.11
i used yarn add gridstack to add it to my project
tried everything on google but i guess im to stupid to fix it.

[seydx]

I am using Vue CLI
vue 3.0.9
i used yarn add gridstack to add it to my project
tried everything on google but i guess im to stupid to fix it.

nvm, with following code it works also with latest version

import "gridstack/dist/gridstack.min.css";
import GridStack from "gridstack/dist/gridstack-jq.js";

[Justin99b]

src/components/StorageContainer.vue:13:23
TS7016: Could not find a declaration file for module 'gridstack/dist/gridstack-jq.js'. 'c:/Users/Justin/Desktop/FiveM/BetterDevelopment/Neuer Ordner/test/node_modules/gridstack/dist/gridstack-jq.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gridstack` if it exists or add a new declaration (.d.ts) file containing `declare module 'gridstack/dist/gridstack-jq.js';`
    11 | <script lang="ts">
    12 | import {Options, Vue} from 'vue-class-component';
  > 13 | import GridStack from "gridstack/dist/gridstack-jq.js";
       |                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    14 | import {StorageContainer} from "@/classes/StorageContainer";
    15 | import GridStackItemComponent from "@/components/GridStackItem.vue";
    16 |

Weird i only get this error

[adumesny]

Update: I was in the wrong mood last night when I saw this. I see the doc (which I pasted below) mentions this... never mind, I'll take a look.

Also there are Vue 3 examples if you didn't see them.

[Justin99b]

I actually have this issue even tho i did it like in the documentation

Failed to compile.

./node_modules/gridstack/dist/jq/jquery.ui.touch-punch.js
Module not found: Error: Can't resolve 'jquery.ui' in 'c:\Users\Justin\Desktop\FiveM\BetterDevelopment\Neuer Ordner\test\node_modules\gridstack\dist\jq'

[Justin99b]

Update: I was in the wrong mood last night when I saw this. I see the doc (which I pasted below) mentions this... never mind, I'll take a look.

Also there are Vue 3 examples if you didn't see them.

We all have those kind of days no worries :)

Yes i saw the Vue3 Examples in Javascript

The only problem is that we cant import the Typescript Gridstack lib because of the mentioned error

note1: I deleted my previous answeres to keep it clean!
note2: I think you forgot to change the tags

[adumesny]

@Justin99b index-jq.d.ts contains what you need, but I need to change filenames...

Also could you guys post a reproduceable folder for me to test ? my Angular app uses h5 (which as you mention works) and not sure it would compile the same way (can't recall if I tried the JQ or not).

[Justin99b]

I Actually need it yes

Im using Gridstack for an Inventory system for FIveM (GTA V Multiplayer)

And They use CEF (Chromium Embedded Framework) which does not support HTML5 Drag & Drop

Therefore its pretty important to use the JQ Variant

[adumesny]

I'm finding the html5 drag&drop less than idea, especially implemented quite differently on mac Safari... so I've been starting a new mouse only (and mobile pointer which is same) events instead. But that still a lot of work left.

[Justin99b]

Here is an example

Quickly created with vue cli

I did not add a working gridstack

but its enough to reproduce
Execute in this order

1 yarn download dependencies
2 yarn serve start the webserver
3. http://localhost:8080
You should now see the error in the console and on the website

reproduce.zip

[adumesny]

the doc include has been updated with info and I have verified that it works on my angular app (v4 and V3) with webpack include directives.

  alias: {
    'jquery': 'gridstack/dist/jq/jquery.js',
    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
  },

don't forget to contribute if you find this lib useful!