vue-css-grid-layout

Vue CSS Grid Layout

A grid layout for Vue.js using CSS Grid Layout.

Features

This library was created since both vue-grid-layout and gridstack.js didn’t fit the requirements for the use in the AAC application AsTeRICS Grid. The main features are:

[!NOTE]
Currently only Vue 2.7 is supported, but it should be no problem to make the library compatible with Vue 3

Examples

There are the following examples (see folder examples):

Use via npm in SFC

To use this library via npm and with Vue’s Single-File Components (SFC), follow these steps:

First install via npm install vue-css-grid-layout --save or yarn add vue-css-grid-layout.

Create a custom component for rendering a single grid element like this, e.g. as render-component.vue:

<template>
    <div class="render-component"></div>
</template>

<script>
export default {
    props: {
        element: Object
    }
}
</script>

<style scoped>
.render-component {
    border: 1px solid black;
    display: flex;
    flex-grow: 1;
}
</style>

Use GridLayout from this library in order to render a grid:

<template>
    <grid-layout :elements="elements" :render-component="RenderComponent"/>
</template>

<script>
import { GridLayout } from 'vue-css-grid-layout';
import RenderComponent from './render-component.vue';

export default {
    components: { GridLayout, RenderComponent},
    data() {
        return {
            RenderComponent: RenderComponent,
            elements: [
                { x: 0, y: 0, width: 1, height: 1, id: 1 },
                { x: 1, y: 1, width: 1, height: 1, id: 2 }
            ]
        }
    }
}
</script>

<style src="vue-css-grid-layout/dist/vue-css-grid-layout.css"></style>

Use from CDN

You can also use the files from CDN (or use the files from the dist folder of this repository).

Include the CSS:

<link rel="stylesheet" href="https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.css">

Create some HTML using the grid-layout element`:

<div id="app">
    <grid-layout :elements="elements" render-component="render-component"/>
</div>

Import the GridLayout class in a script and use it:

<script type="module">
    import { GridLayout } from 'https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.es.js';

    Vue.component('render-component', {
        template: '<div class="render-component"></div>',
        props: {
            element: Object
        }
    });

    new Vue({
        el: '#app',
        components: { GridLayout },
        data() {
            return {
                elements: [
                    { x: 0, y: 0, width: 1, height: 1, id: 1 },
                    { x: 1, y: 1, width: 1, height: 1, id: 2 }
                ]
            };
        }
    });
</script>

See minimum-example.html for the full example.

API

There are two components that can be used:

GridLayout

The GridLayout Vue component has the following props and events.

Props

Any additional props can be passed to GridLayout which are passed on to the renderComponent. So e.g. if passing some generic options to grid-layout like this:

<grid-layout :elements="elements" render-component="render-component" :generic-options="{ color: 'green' }"/>

These options can be used within the render-component along with the element passed by default:

props: {
    element: Object, 
    genericOptions: Object
}

Events

Two events can be emitted by GridLayout with editable: true:

gridLayoutUtil

The component gridLayoutUtil can be used for manually doing actions on the grid elements like moving all elements or resolving conflicts.

Import it along with GridLayout, if needed:

import { GridLayout, gridLayoutUtil } from 'vue-css-grid-layout';
// or
import { GridLayout, gridLayoutUtil } from 'https://unpkg.com/vue-css-grid-layout/dist/vue-css-grid-layout.es.js';

These are the most important methods, for more details look at the JSDoc comments in the implementation:

Acknowledgement

This library was initially developed within a netidee project funding.

This library uses interact.js as dependency.

This site is open source. Improve this page.