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! [email protected] build: `vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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.