Vue 3 branch installation

[T0miii]

Hi,

just a question how do i install the vue3 branch into my project? Is it possible to install it trough npm?

thx

[liucy1983]

I have tried this command, it works well yarn add [email protected]

[abulka]

@liucy1983 Any chance you could post a simple example project? I'm getting

Failed to resolve component: grid-item at <App>
Failed to resolve component: grid-layout at <App>

with

<template>
  <grid-layout>
    v-model="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>

</template>

<script>
// import VueGridLayout from "vue-grid-layout";
import { GridItem, GridLayout } from "vue-grid-layout";

export default {
  name: "App",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
        { x: 6, y: 0, w: 2, h: 3, i: "3" },
        { x: 8, y: 0, w: 2, h: 3, i: "4" },
        { x: 10, y: 0, w: 2, h: 3, i: "5" },
        { x: 0, y: 5, w: 2, h: 5, i: "6" },
        { x: 2, y: 5, w: 2, h: 5, i: "7" },
        { x: 4, y: 5, w: 2, h: 5, i: "8" },
        { x: 6, y: 3, w: 2, h: 4, i: "9" },
        { x: 8, y: 4, w: 2, h: 4, i: "10" },
        { x: 10, y: 4, w: 2, h: 4, i: "11" },
        { x: 0, y: 10, w: 2, h: 5, i: "12" },
        { x: 2, y: 10, w: 2, h: 5, i: "13" },
        { x: 4, y: 8, w: 2, h: 4, i: "14" },
        { x: 6, y: 8, w: 2, h: 4, i: "15" },
        { x: 8, y: 10, w: 2, h: 5, i: "16" },
        { x: 10, y: 4, w: 2, h: 2, i: "17" },
        { x: 0, y: 9, w: 2, h: 3, i: "18" },
        { x: 2, y: 6, w: 2, h: 2, i: "19" },
      ],
    };
  },
  components: {
    GridItem,
    GridLayout,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

and everyone seems to be struggling e.g. #439

[nanfeng1129]

@liucy1983 Any chance you could post a simple example project? I'm getting

Failed to resolve component: grid-item at <App>
Failed to resolve component: grid-layout at <App>

with

<template>
  <grid-layout>
    v-model="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>

</template>

<script>
// import VueGridLayout from "vue-grid-layout";
import { GridItem, GridLayout } from "vue-grid-layout";

export default {
  name: "App",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
        { x: 6, y: 0, w: 2, h: 3, i: "3" },
        { x: 8, y: 0, w: 2, h: 3, i: "4" },
        { x: 10, y: 0, w: 2, h: 3, i: "5" },
        { x: 0, y: 5, w: 2, h: 5, i: "6" },
        { x: 2, y: 5, w: 2, h: 5, i: "7" },
        { x: 4, y: 5, w: 2, h: 5, i: "8" },
        { x: 6, y: 3, w: 2, h: 4, i: "9" },
        { x: 8, y: 4, w: 2, h: 4, i: "10" },
        { x: 10, y: 4, w: 2, h: 4, i: "11" },
        { x: 0, y: 10, w: 2, h: 5, i: "12" },
        { x: 2, y: 10, w: 2, h: 5, i: "13" },
        { x: 4, y: 8, w: 2, h: 4, i: "14" },
        { x: 6, y: 8, w: 2, h: 4, i: "15" },
        { x: 8, y: 10, w: 2, h: 5, i: "16" },
        { x: 10, y: 4, w: 2, h: 2, i: "17" },
        { x: 0, y: 9, w: 2, h: 3, i: "18" },
        { x: 2, y: 6, w: 2, h: 2, i: "19" },
      ],
    };
  },
  components: {
    GridItem,
    GridLayout,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

and everyone seems to be struggling e.g. #439

you should add the following line of code in the main.js createApp(App).use(VueGridLayout)

[T0miii]

import VueGridLayout from 'vue-grid-layout'
app.use(VueGridLayout)

[abulka]

Thanks - that worked!

Now I'm getting:

runtime-core.esm-bundler.js?5c40:6873 [Vue warn]: Missing required prop: "layout" 
  at <GridLayout> 
  at <App>
Uncaught (in promise) Error: Layout must be an array!
    at validateLayout (vue-grid-layout.common.js?7be8:4899)
    at Proxy.eval (vue-grid-layout.common.js?7be8:13009)

I do have an array for layout? I removed the v-model="layout" in the above code (which was a bad guess by me), and tried both

• :layout.sync="layout"
• :layout="layout"

but both give the same error. I also tried adding ref="gridlayout" but that didn't help either:

<template>
  <grid-layout>
    :layout="layout"
    ref="gridlayout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
  >

Any ideas?

[nanfeng1129]

try this v-model:layout="layout"

[abulka]

@nanfeng1129 same error !

Click to expand!

   Here are my file contents:

package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-grid-layout": "3.0.0-beta1"
  },

main.js

import { createApp } from 'vue'
import App from './App.vue'

let app = createApp(App)

import VueGridLayout from 'vue-grid-layout'
app.use(VueGridLayout)

app.mount('#app')

App.vue

<template>
  <grid-layout>
    v-model:layout="layout"
    ref="gridlayout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      {{ item.i }}
    </grid-item>
  </grid-layout>

</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
// import VueGridLayout from "vue-grid-layout";
import { GridItem, GridLayout } from "vue-grid-layout";

export default {
  name: "App",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
        { x: 6, y: 0, w: 2, h: 3, i: "3" },
        { x: 8, y: 0, w: 2, h: 3, i: "4" },
        { x: 10, y: 0, w: 2, h: 3, i: "5" },
        { x: 0, y: 5, w: 2, h: 5, i: "6" },
        { x: 2, y: 5, w: 2, h: 5, i: "7" },
        { x: 4, y: 5, w: 2, h: 5, i: "8" },
        { x: 6, y: 3, w: 2, h: 4, i: "9" },
        { x: 8, y: 4, w: 2, h: 4, i: "10" },
        { x: 10, y: 4, w: 2, h: 4, i: "11" },
        { x: 0, y: 10, w: 2, h: 5, i: "12" },
        { x: 2, y: 10, w: 2, h: 5, i: "13" },
        { x: 4, y: 8, w: 2, h: 4, i: "14" },
        { x: 6, y: 8, w: 2, h: 4, i: "15" },
        { x: 8, y: 10, w: 2, h: 5, i: "16" },
        { x: 10, y: 4, w: 2, h: 2, i: "17" },
        { x: 0, y: 9, w: 2, h: 3, i: "18" },
        { x: 2, y: 6, w: 2, h: 2, i: "19" },
      ],
    };
  },
  components: {
    // HelloWorld,
    // GridLayout: VueGridLayout.GridLayout,
    // GridItem: VueGridLayout.GridItem,
    GridItem,
    GridLayout,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Removing ref="gridlayout" doesn't help.

[nanfeng1129]

I think you can re-install the vue-grid-layout

[abulka]

yarn remove vue-grid-layout
yarn add [email protected]
yarn serve

same error.

`package.json` - Click to expand!

  Here is my full `package.json`

{
  "name": "vue-grid-play1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-grid-layout": "3.0.0-beta1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[T0miii]

try to remove the import import { GridItem, GridLayout } from "vue-grid-layout"; and the component registration from the component itself just live the import in the app.js

[abulka]

Thanks for the suggestion - hopefully I followed your instructions OK. I still seem to get the same error:

[leon-kfd]

I think you need to use Vue3 composition api in v-model:layout="layout"

try this code:

<template>
  <grid-layout 
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <grid-item 
      v-for="item in layout"
      :static="item.static"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      <span class="text">{{itemTitle(item)}}</span>
    </grid-item>
  </grid-layout>
</template>

<script setup>
import { ref } from 'vue'
const layout = ref([
    {"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
    {"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
    {"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
    {"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
    {"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
    {"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
    {"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
    {"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
    {"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
    {"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
    {"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
    {"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
    {"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
    {"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
    {"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
    {"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
    {"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
    {"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
    {"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
    {"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
])
const itemTitle = (item) => {
  let result = item.i;
  if (item.static) {
      result += " - Static";
  }
  return result;
}
</script>
<style scoped>
.vue-grid-layout {
  background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .static {
  background: #cce;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
</style>

@abulka

[aCard0s0]

Had the same problem... @leon-kfd your fix work! Thank you very much

[NewNork]

Disclaimer: I'm very new to Vue + Vite and them all, but I can't get that damn thing to work. Basic setup:

package.json

{
  "name": "vue_test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16",
    "vue-grid-layout": "^3.0.0-beta1"
  },
  "devDependencies": {
    "@types/node": "^16.11.11",
    "@vitejs/plugin-vue": "^1.10.1",
    "vite": "^2.6.4"
  }
}

and copy paste @leon-kfd's code to App.vue. Finally,

main.js

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

const app = createApp(App)
app.use(VueGridLayout)
app.mount('#app')

Vite then throws the error

[plugin:vite:vue] v-model argument is not supported on plain elements.

/.../vue_test/src/App.vue:3:13

1  |  <template>
2  |    <grid-layout 
3  |      v-model:layout="layout"
   |               ^
4  |      :col-num="12"
5  |      :row-height="30"

The only thing I've noticed is that the Vue version in package.json (3.2.16) differs from package-lock.json (3.2.23), which I reckon is alright due to the preceeding carret. Otherwise I'm pretty clueless about what's going on (or why nothing is going on for that matter)

[leon-kfd]

@NewNork see here: https://codesandbox.io/embed/vue-grid-layout-for-vue3-yvs1c?fontsize=14&hidenavigation=1&theme=dark vue version is v3.2.16

[MtDalPizzol]

@NewNork see here: https://codesandbox.io/embed/vue-grid-layout-for-vue3-yvs1c?fontsize=14&hidenavigation=1&theme=dark vue version is v3.2.16

I have this exact setup, except for using Vite and I'm getting the following:

Failed to resolve component: GridItem
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Failed to resolve component: GridLayout
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[liucy1983]

@NewNork see here: https://codesandbox.io/embed/vue-grid-layout-for-vue3-yvs1c?fontsize=14&hidenavigation=1&theme=dark vue version is v3.2.16

I have this exact setup, except for using Vite and I'm getting the following:

Failed to resolve component: GridItem
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Failed to resolve component: GridLayout
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

use [email protected], the v2.x does not support vue3

[zhangshilun]

@liucy1983 Has your problem been solved? I have the same problem as you

[liucy1983]

@liucy1983 Has your problem been solved? I have the same problem as you

yes. add my wechat: liucy1983

[patsuhiko]

Hey, thank you - got it working with the 3.0.0-beta1 + the latest vue version. Created a fresh vue project just with the example from @leon-kfd but if i connect with a smartphone, i cannot scroll the page. Tested also with the drag-allow-from and drag-ignore-from props but i can only scroll, if i hit the background (grid-layout).

Can anybody reproduce that or has a solution? The original example with version 2.3.12 is working without problems on mobile devices 01 Basic example

Thanks

[50rayn]

Hello. There is an alternative, vue3-drr-grid-layout module which provides:

• the same functionality
• smaller bundle size
• vue3 support

[abulka]

@50rayn this is amazing work, thank you!

Here is a vue3 + vite stackbitz project with the main example running successfully using your vue3-drr-grid-layout module.

P.S. I couldn't get the non vite version to run on stackblitz - for some reason the console says Failed to resolve component: GridLayout. No doubt I'm doing something wrong - no biggie, I prefer using vite anyway.