Support Vue 3 ?

[thibaut-lo]

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

[strxetics]

any news on this?

[dnlsndr]

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]

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]

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

[SergeyKhval]

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]

Thanks @SergeyKhval ! Just created the vue3 branch.

[SergeyKhval]

Opened a PR here #470

[gmsa]

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

[manang]

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]

@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]

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

Thanks a lot

[SergeyKhval]

@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]

thanks

[jok311]

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]

@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]

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]

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

[SergeyKhval]

@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]

@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 https://github.com/vuejs/rollup-plugin-vue/issues/231#issuecomment-433743131

[plc-dev]

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]

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

[plc-dev]

@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]

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]

@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]

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]

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]

I could get it to work by:

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

@jok311 , @betterRunner, @rhlatky

475 #518

[DeveloperMironenko]

I could get it to work by:

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

@jok311 , @betterRunner, @rhlatky

475 #518

I try to connect this dist from this branch to my application on to the vue 3, but the grid don't work

[dhondtlaurens]

Hi @MironenkoDeveloper,

I've actually put the built files in the dist folder of the node_modules so I can use the normal way of importing the grid in the Vue project:

import { GridLayout, GridItem } from 'vue-grid-layout/dist/vue-grid-layout.common'

components: { GridLayout, GridItem }

If it doesn't work, here is a link to the files I've built and use: dist.zip

Hope this works!

[SergeyKhval]

@MironenkoDeveloper I am not sure, that this will work the way you include built files. For local dependencies you can use paths in package.json file or use npm link to create a symlink to local dependency.

[gmsa]

@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]

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

[fts1025]

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]

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]

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]

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]

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]

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]

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

[nicotu01]

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

[lvjunhao]

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

This is a package, put it in node_modules

[tbtalbottjr]

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]

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]

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

[Blakeinstein]

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]

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]

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

[zhoulujun]

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

[zhoulujun]

tsx版本，可以用

[50rayn]

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