Support Vue 3 ? #439

thibaut-lo · 2020-07-06T09:10:43Z

Is it foreseen that Vue-Grid-Layout supports incoming Vue 3 ?

With latest vue-grid-layout 2.3.7 and vue 3.0.0-beta.18, we get

The text was updated successfully, but these errors were encountered:

strxetics · 2020-07-30T11:48:09Z

any news on this?

dnlsndr · 2020-07-30T17:06:55Z

It seems to me that this project is abandoned.
There hasn't been a commit since October 2019 with currently 140 issues open... Maybe someone with dedication will fork this repo and rewrite/adapt it for vue3?

gmsa · 2020-07-30T18:10:24Z

Its not abandoned, just been really busy.

Vue 3 is not released yet, so not a priority right now. Feel free to implement Vue 3 support and submit a PR

Aljodomo · 2020-09-28T07:02:06Z

Vue 3 was just released. Any progress on this end?

SergeyKhval · 2020-09-29T20:26:13Z

I managed to run this in Vue3 environment with Vite https://github.com/SergeyKhval/vue3-grid-layout. This is not production ready, just a minimal set of changes needed to run this in Vue3. I am also not sure if it is possible to support both Vue2 and Vue3 in the same codebase. @gmsa if you open a separate branch I can make a PR

gmsa · 2020-09-30T07:25:23Z

Thanks @SergeyKhval ! Just created the vue3 branch.

SergeyKhval · 2020-09-30T18:56:03Z

Opened a PR here #470

gmsa · 2020-10-01T09:07:57Z

Thank you, I'll give it a look when I have some time.

manang · 2020-10-02T09:56:18Z

Hi @SergeyKhval , I want to test your PR, (https://github.com/SergeyKhval/vue-grid-layout/tree/vue3)
I'm trying to compile it with
npm run-script build and I obtain this error:

vite v1.0.0-rc.4
⠴ Building for production...
[vite] Build errored out.
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at error (/Users/manangel/vue/vue-grid-layout/node_modules/rollup/dist/shared/rollup.js:5210:30)
    at throwPluginError (/Users/manangel/vue/vue-grid-layout/node_modules/rollup/dist/shared/rollup.js:17817:12)
    at Object.error (/Users/manangel/vue/vue-grid-layout/node_modules/rollup/dist/shared/rollup.js:18436:24)
    at Object.error (/Users/manangel/vue/vue-grid-layout/node_modules/rollup/dist/shared/rollup.js:17990:38)
    at /Users/manangel/vue/vue-grid-layout/node_modules/rollup-plugin-vue/dist/index.js:183:63
    at Array.forEach (<anonymous>)
    at Object.transform (/Users/manangel/vue/vue-grid-layout/node_modules/rollup-plugin-vue/dist/index.js:183:39) {
  id: '/Users/manangel/vue/vue-grid-layout/src/components/GridItem.vue?vue&type=style&index=0&lang.css',
  hook: 'transform',
  code: 'PLUGIN_ERROR',
  plugin: 'vue',
  watchFiles: [
    '/Users/manangel/vue/vue-grid-layout/index.html',
    '/Users/manangel/vue/vue-grid-layout/src/main.js',
    '/Users/manangel/vue/vue-grid-layout/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    '/Users/manangel/vue/vue-grid-layout/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
    '/Users/manangel/vue/vue-grid-layout/node_modules/@vue/shared/dist/shared.esm-bundler.js',
    '/Users/manangel/vue/vue-grid-layout/src/App.vue',
    '/Users/manangel/vue/vue-grid-layout/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
    '/Users/manangel/vue/vue-grid-layout/src/App.vue?vue&type=script&lang.ts',
    '/Users/manangel/vue/vue-grid-layout/src/App.vue?vue&type=template&id=7ba5bd90',
    '/Users/manangel/vue/vue-grid-layout/src/components/index.js',
    '/Users/manangel/vue/vue-grid-layout/src/components/GridItem.vue',
    '/Users/manangel/vue/vue-grid-layout/src/components/GridLayout.vue',
    '/Users/manangel/vue/vue-grid-layout/src/components/GridItem.vue?vue&type=script&lang.ts',
    '/Users/manangel/vue/vue-grid-layout/src/components/GridItem.vue?vue&type=template&id=15f3b9ae',
    '/Users/manangel/vue/vue-grid-layout/src/components/GridItem.vue?vue&type=style&index=0&lang.css'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-grid-layout@2.3.9 build: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-grid-layout@2.3.9 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/manangel/.npm/_logs/2020-10-02T09_55_40_037Z-debug.lo

can you tell me if I'm doing well?
thanks

SergeyKhval · 2020-10-02T10:14:05Z

@manang I mentioned in PR comment that currently build is broken because I moved from webpack to vite. I am figuring out how to restore it. For now you can run it in dev mode (yarn dev). If you find out how to overcome this PostCSS issue feel to ping me.

manang · 2020-10-02T10:15:41Z

Ah, sorry,
let me check if I find out a solution.

Thanks a lot

SergeyKhval · 2020-10-02T10:23:01Z

@manang I downgraded autoprefixer and it fixed build error. However I am still not sure if built scripts would work properly. You can pull latest changes

manang · 2020-10-02T10:25:37Z

thanks

jok311 · 2020-10-03T05:02:14Z

Hi @SergeyKhval, I got this error when I use it in vue3
Uncaught (in promise) TypeError: external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor
at Proxy.created

SergeyKhval · 2020-10-03T09:06:50Z

@jok311 this is because the package currently lacks proper build step. For now you can only run it in dev mode (yarn dev). You can also try to build it yourself with yarn build command, but I cannot guarantee that bulit package will also work as expected.

SergeyKhval · 2020-10-06T19:29:39Z

I pushed changes to #470 which add a working build step for Vue3 with rollup. take a note that to properly use built packages in Vue3 + Vite you need to add the following vite.config.js:

export default {
    optimizeDeps: {
        include: ['vue-grid-layout']
    }
}

xiaoForest · 2020-11-18T03:59:15Z

@SergeyKhval Hello, can the above scheme support VUE3 (#^.^#)

SergeyKhval · 2020-11-18T10:54:14Z

@xiaoForest the working implementation is in this branch https://github.com/jbaysolutions/vue-grid-layout/tree/vue3. However I would not recommend to use it in production. Still feel free to test it. If you find any issues I'll try to address them

PilockHulmes · 2020-12-09T03:12:12Z

@SergeyKhval Thanks! Build with yarn build works for me, though in order to build successfully, I need to put vue() at the start of plugins list in rollup.config.js, like

    plugins: [
        vue(), // put it here
        nodeResolve(),
        commonjs(),
        typescript({
            tsconfig: false,
            experimentalDecorators: true,
            module: 'es2015'
        }),
        postcss({
            plugins: [require('autoprefixer')]
        }),
        terser(),
    ]

Found this solution in vuejs/rollup-plugin-vue#231 (comment)

plc-dev · 2020-12-24T23:49:35Z

Is there any update on the state of the migration or when this is going to be available for production usage in the package?

I'd also be willing to help push the issue if you could give me some pointers on what steps are missing/need to be worked on @SergeyKhval / @gmsa

SergeyKhval · 2021-01-06T10:20:19Z

@plc-dev as for me it looks more or less ready, just need to add fix for build issue described aboe

Fix plugin order as stated here: jbaysolutions#439 (comment)

Fix config as stated here: jbaysolutions#439 (comment)

plc-dev · 2021-01-08T19:29:05Z

@SergeyKhval Thanks for the response.

I've fixed the mentioned build issues in the vue3-branch of my fork of the repository as described above.
Also I had to rename the value-prop in the GridLayout component in order to retain reactivity of the layout.
This is due to these breaking changes and overload of "value" in the Ref-Type I believe.
The examples seem out of date as well, since the prop.sync option was replaced by v-model.prop and v-for requires the binding of a key-property which are missing in the examples (atleast the basic example).

@gmsa Do you see anything still missing for an official vue-3-release? I'd also be willing to update the examples if that would help push the issue.

gmsa · 2021-01-11T11:03:44Z

I don't have any experience with Vue 3 yet, so I wouldn't know.
Is the build fully working and the lib usable with Vue 3, or does any project that depends on it require vite as well?

plc-dev · 2021-01-11T11:13:32Z

@gmsa Thanks for your response.

No, only the vue-grid-layout has to be built via vite and rollup. The project importing vue-grid-layout still only requires the built files in the dist-directory.

I think the only thing that might be an issue is if there is more synched props in other places that have name collisions, such as the mentioned value-prop in the GridLayout component, (I only briefly checked and didn't see any), but the fix for that would be trivial. Other than that the lib is fully usable (from my testing).

SergeyKhval · 2021-01-11T13:53:04Z

May be it'll be good if dev dependencies also get updated. At least Vite guys release like crazy and current version of Vite is far ahead from what is used here

dhondtlaurens · 2021-01-11T13:57:37Z

This doesn't apply to Vue3 projects initiated with the Vue CLI (Webpack) I guess? I still encounter the TypeError: external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor problem there.

dhondtlaurens · 2021-01-11T15:09:54Z

I could get it to work by:

Cloning https://github.com/plc-dev/vue-grid-layout/tree/vue3
Checkout to vue3 branch
Build the project by first yarn install and then yarn build
Use the built files from the dist folder in my own vue3 project

@jok311 , @betterRunner, @rhlatky

#475 #518

gmsa · 2021-01-25T17:09:43Z

@SergeyKhval I'm trying to run vite on the branch with "yarn dev" and I'm getting this error:

yarn run v1.22.5
$ vite
[vite] failed to load config from C:\projects\JBAY\vue-grid-layout\vite.config.js:
C:\projects\JBAY\vue-grid-layout\vite.config.js:1
export default {
^^^^^^

SyntaxError: Unexpected token export

Any ideas?

DeveloperMironenko · 2021-01-25T19:50:00Z

I don't understand how to run this dist with VUE 3. Pls help me =(

fts1025 · 2021-01-26T03:18:57Z

I've forked this project to support Vue 3 for temporary use.
It should less troubles as there are minimum changes.

https://github.com/fts1025/vue-grid-layout/tree/vue3-webpack

Install

npm i -S https://github.com/fts1025/vue-grid-layout.git#vue3-webpack

Import the library

import { GridItem, GridLayout } from 'vue-grid-layout'

export default {
  components: {
      GridItem,
      GridLayout,
   },
}

or

import { createApp } from 'vue';
import App from './App.vue';
import VueGridLayout from 'vue-grid-layout'

createApp(App)
  .use(VueGridLayout)
  .mount('#app');
}

Usage

rewrite prop name layout to value.

<grid-layout
  :value="layout"
  ...
>
  <grid-item
    v-for="item in layout"
    ...
  >
    {{item.i}}
  </grid-item>
</grid-layout>

DeveloperMironenko · 2021-01-26T08:39:04Z

I've forked this project to support Vue 3 for temporary use.
It should less troubles as there are minimum changes.

https://github.com/fts1025/vue-grid-layout/tree/vue3-webpack

Install

npm i -S https://github.com/fts1025/vue-grid-layout.git#vue3-webpack

Import the library

import { GridItem, GridLayout } from 'vue-grid-layout'

export default {
  components: {
      GridItem,
      GridLayout,
   },
}

or

import { createApp } from 'vue';
import App from './App.vue';
import VueGridLayout from 'vue-grid-layout'

createApp(App)
  .use(VueGridLayout)
  .mount('#app');
}

Usage

rewrite prop name layout to value.

<grid-layout
  :value="layout"
  ...
>
  <grid-item
    v-for="item in layout"
    ...
  >
    {{item.i}}
  </grid-item>
</grid-layout>

Don't help me
import { GridItem, GridLayout } from 'vue-grid-layout'

export default {
components: {
GridItem,
GridLayout,
},
}

But this help for me. Thanks
import { createApp } from 'vue';
import App from './App.vue';
import VueGridLayout from 'vue-grid-layout'

createApp(App)
.use(VueGridLayout)
.mount('#app');
}

DeveloperMironenko · 2021-01-26T09:23:20Z

I did try use this npm i -S https://github.com/fts1025/vue-grid-layout.git#vue3-webpack but base events don't work =(

gmsa · 2021-01-27T19:01:21Z

Published a beta release for vue3 on npm

Sample using it available here

There are still some bugs, like responsive layouts not working, would appreciate any help, source branch is vue3-webpack

tbtalbottjr · 2021-02-03T19:52:41Z

Trying out 3.0.0.beta1 in an attempt to convert my app to VueJs 3.0. I am having the same problem as above:

import { GridLayout, GridItem } from 'vue-grid-layout'

returns 'undefined' for GridLayout and GridItem.

While it looks like app.use(VueGridLayout) does work, I have a customized GridItem and need to get that definition directly and use it.

lvjunhao · 2021-03-05T05:28:57Z

I did try use this npm i -S https://github.com/fts1025/vue-grid-layout.git#vue3-webpack but base events don't work =(

you can use it https://github.com/lvjunhao/vue-grid-layout

lvjunhao · 2021-03-05T05:29:34Z

try it https://github.com/lvjunhao/vue-grid-layout

nicotu01 · 2021-03-07T07:21:43Z

Hi !
I Cannot use it in Vue 3 project. Is there an example project ?

lvjunhao · 2021-03-07T07:40:53Z

Hi !
I Cannot use it in Vue 3 project. Is there an example project ?

This is a package, put it in node_modules

tbtalbottjr · 2021-03-09T16:20:42Z

try it https://github.com/lvjunhao/vue-grid-layout

Is there a reason that this is not a fork? It sure would be nice to see what the changes are that were made.

Blakeinstein · 2021-08-12T10:44:29Z

Published a beta release for vue3 on npm

Do events not work? There are some inconsistencies with me using vue-preferences to store the layout's v-model in local storage, and was planning on using the layout updated event to save the new layout.

rushil-saraogi · 2021-09-06T23:43:05Z

Anything I can hack to get the responsive mode to work?

Blakeinstein · 2021-09-07T13:25:16Z

Anything I can hack to get the responsive mode to work?

But responsive mode does work.
Here is what my markup looks like.

<grid-layout
  v-model:layout="layout"
  :col-num="10"
  :col-size="20"
  :is-resizable="true"
  :use-css-transforms="true"
  :auto-size="false"
  :row-height="10"
  :vertical-compact="false"
  :prevent-collision="true"
  :margin="margin"
  @layout-updated="updateLayout"
  class="content-grid"
>

hspaay · 2021-12-23T19:06:05Z

Looks like responsive mode has a bug in it (latest v3 branch):
In GridLayout.vue:418 it only saves the current layout if it doesn't exist in the internal 'layouts' map.

  if(this.lastBreakpoint != null && !this.layouts[this.lastBreakpoint])

If the layout already exists it is not saved and layout changes are lost.
Maybe this should simply be this?

  if(this.lastBreakpoint != null)

I don't have the setup to test this. If anyone would be able to that be great.

Update: Workaround for this bug by saving the layout on a breakpoint change event

This uses a ref to the GridLayout instance to access the layouts object.

<script>
const data = reactive(layout:[{...}, {...}])
const gridLayout = ref()

// Listen for breakpoint events and save the previous layout
const handleBreakpointChange = (newBreakpoint:any, newLayout:any) => {
  if (gridLayout.value.lastBreakpoint ) {
      let lastBreakpoint = gridLayout.value.lastBreakpoint
      gridLayout.value.layouts[lastBreakpoint] = data.layout;
      data.layout = newLayout
  }
}
</script>
<template>
  <!-- draggableCancel is used to prevent interference with tile menu click -->
    <GridLayout ref="gridLayout"
         :layout.sync="data.layout"
        :col-num="12"
        :row-height="40"
        :is-draggable="appState.State().editMode"
        :is-resizable="appState.State().editMode"
        :responsive="true"
        :useCSSTransforms="true"
        draggableCancel=".not-draggable-area"
        @layout-updated="handleLayoutUpdate"
        @breakpoint-changed="handleBreakpointChange"
    >
</template>

hisuwh · 2022-02-16T09:43:43Z

Is there any progress in moving this from beta to GA?

zhoulujun · 2022-07-30T14:47:22Z

https://github.com/zhoulujun/vue3-grid-layout

zhoulujun · 2022-07-30T14:47:37Z

tsx版本，可以用

50rayn · 2022-09-07T21:19:21Z

Try using the module vue3-drr-grid-layout, mentioned in comment

shariquerik · 2022-12-22T08:39:43Z

Is there any progress in moving this from beta to stable for Vue3

fabianB30 · 2022-12-27T01:01:02Z

Hello! is there any news on the Vue3 version? Im having the same issue that brought me to this thread. The issue is:

Uncaught TypeError: external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor

I am using Vite

Thanks!

50rayn · 2022-12-27T15:35:23Z

@shariquerik @fabianB30 Have a try with vue3-drr-grid-layout ?

fabianB30 · 2022-12-28T15:50:20Z

@50rayn this did work! thanks for the help

fabianB30 · 2023-01-10T00:37:46Z

@50rayn Hello! in the code included in the vue3-drr-grid-layout docs, the script tag is written without the lang="ts", but in my proyect i must include it. But when i do, the gridItemProps all break. i get this error message:

Uncaught (in promise) TypeError: Cannot destructure property 'gridItemProps' of 'undefined' as it is undefined.

is there a workaround for this? Thanks

50rayn · 2023-01-10T08:17:04Z

@fabianB30 Can you please open an issue in vue3-drr-grid-layout repo and tag also the creator? I'll also try to research this issue.

thanks in advance :)

dhaladitya108 · 2024-12-31T11:32:18Z

hey, I am unable to make it work with nuxt 3.

I have tried both these, but I am facing issue in the server side while refresh.

Published a beta release for vue3 on npm

Sample using it available here

There are still some bugs, like responsive layouts not working, would appreciate any help, source branch is vue3-webpack

npm i -S https://github.com/fts1025/vue-grid-layout.git#vue3-webpack

gmsa added the help wanted label Jul 30, 2020

plc-dev added a commit to plc-dev/vue-grid-layout that referenced this issue Jan 8, 2021

Update rollup.config.js

a45336f

Fix plugin order as stated here: jbaysolutions#439 (comment)

plc-dev added a commit to plc-dev/vue-grid-layout that referenced this issue Jan 8, 2021

Update vite.config.js

f8cffb4

Fix config as stated here: jbaysolutions#439 (comment)

gmsa mentioned this issue Jan 25, 2021

Vue 3 #550

Closed

abulka mentioned this issue Aug 17, 2021

Vue 3 branch installation #617

Open

gmsa mentioned this issue Aug 24, 2022

Document is not defined #702

Closed

Support Vue 3 ? #439

Support Vue 3 ? #439

Comments

thibaut-lo commented Jul 6, 2020

strxetics commented Jul 30, 2020

dnlsndr commented Jul 30, 2020

gmsa commented Jul 30, 2020

Aljodomo commented Sep 28, 2020

SergeyKhval commented Sep 29, 2020

gmsa commented Sep 30, 2020

SergeyKhval commented Sep 30, 2020

gmsa commented Oct 1, 2020

manang commented Oct 2, 2020 • edited Loading

SergeyKhval commented Oct 2, 2020

manang commented Oct 2, 2020

SergeyKhval commented Oct 2, 2020

manang commented Oct 2, 2020

jok311 commented Oct 3, 2020

SergeyKhval commented Oct 3, 2020

SergeyKhval commented Oct 6, 2020

xiaoForest commented Nov 18, 2020

SergeyKhval commented Nov 18, 2020

PilockHulmes commented Dec 9, 2020 • edited Loading

plc-dev commented Dec 24, 2020 • edited Loading

SergeyKhval commented Jan 6, 2021

plc-dev commented Jan 8, 2021

gmsa commented Jan 11, 2021

plc-dev commented Jan 11, 2021 • edited Loading

SergeyKhval commented Jan 11, 2021

dhondtlaurens commented Jan 11, 2021 • edited Loading

dhondtlaurens commented Jan 11, 2021

gmsa commented Jan 25, 2021 • edited Loading

DeveloperMironenko commented Jan 25, 2021

fts1025 commented Jan 26, 2021

Install

Import the library

Usage

DeveloperMironenko commented Jan 26, 2021

Install

Import the library

Usage

DeveloperMironenko commented Jan 26, 2021

gmsa commented Jan 27, 2021

tbtalbottjr commented Feb 3, 2021

lvjunhao commented Mar 5, 2021

lvjunhao commented Mar 5, 2021

nicotu01 commented Mar 7, 2021

lvjunhao commented Mar 7, 2021

tbtalbottjr commented Mar 9, 2021 • edited Loading

Blakeinstein commented Aug 12, 2021 • edited Loading

rushil-saraogi commented Sep 6, 2021

Blakeinstein commented Sep 7, 2021

hspaay commented Dec 23, 2021 • edited Loading

Update: Workaround for this bug by saving the layout on a breakpoint change event

hisuwh commented Feb 16, 2022 • edited Loading

zhoulujun commented Jul 30, 2022

zhoulujun commented Jul 30, 2022

50rayn commented Sep 7, 2022

shariquerik commented Dec 22, 2022

fabianB30 commented Dec 27, 2022 • edited Loading

50rayn commented Dec 27, 2022 • edited Loading

fabianB30 commented Dec 28, 2022

fabianB30 commented Jan 10, 2023

50rayn commented Jan 10, 2023

dhaladitya108 commented Dec 31, 2024

manang commented Oct 2, 2020 •

edited

Loading

PilockHulmes commented Dec 9, 2020 •

edited

Loading

plc-dev commented Dec 24, 2020 •

edited

Loading

plc-dev commented Jan 11, 2021 •

edited

Loading

dhondtlaurens commented Jan 11, 2021 •

edited

Loading

gmsa commented Jan 25, 2021 •

edited

Loading

tbtalbottjr commented Mar 9, 2021 •

edited

Loading

Blakeinstein commented Aug 12, 2021 •

edited

Loading

hspaay commented Dec 23, 2021 •

edited

Loading

hisuwh commented Feb 16, 2022 •

edited

Loading

fabianB30 commented Dec 27, 2022 •

edited

Loading

50rayn commented Dec 27, 2022 •

edited

Loading