vue-grid-layout-vue3-example

A component library for Vue3 using vue-grid-layout@3.0.0-beta1

Introduction

vue-grid-layout-vue3-example is a collection of example components developed with Vue 3 and Vue Grid Layout. It showcases the feasibility of using Vue Grid Layout in a Vue 3 project, along with the utilization of the Composition API.

Installation

Install the package from npm:

npm i vue-grid-layout-vue3-example vue-grid-layout@3.0.0-beta1 element-plus

Using in vue3

main.ts
import VueGridLayout from 'vue-grid-layout'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import example from 'vue-grid-layout-vue3-example'

app.use(VueGridLayout)
app.use(ElementPlus)
app.use(example)

app.vue
<template>
    <basic />
</template>

Using in nuxt3

plugins/vue-grid-layout-vue3-example.ts
import VueGridLayout from 'vue-grid-layout'
import example from 'vue-grid-layout-vue3-example'
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VueGridLayout)
    nuxtApp.vueApp.use(example)
})

plugins/element-plus.ts
import ElementPlus from 'element-plus'
import { ID_INJECTION_KEY } from 'element-plus';
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(ElementPlus)
    nuxtApp.vueApp.provide(ID_INJECTION_KEY, {
        prefix: Math.floor(Math.random() * 10000),
        current: 0,
    })
})

app.vue
<template>
    <basic />
</template>

components example

• <Basic />
• <Container />
• <Dialog />
• <DragIgnore />
• <DynamicAdd />
• <Resize />
• <ResponsivePreDefinedLayout />