Press "Enter" to skip to content

Vue Component for Designing Grid Layouts with SortableJS

Vue Grid Designer is a Vue 2.x component for designing grid layouts using Sortable.js. Build a responsive grid based on rows and blocks using HTML5 drag and drop. A JSON form can be used to create an actual HTML grid using any CSS framework you choose or saved to a database for later use.

sortable grid using draggable, vue grid layout, vue drag and drop page builder, drag and drop grid javascript, javascript grid layout library, javascript dynamic grid layout

How to make use of it:

Install and download:

$ npm i @thefootonline/vue-grid-designer --save

1. Import the grid designer into your Vue project.

import Vue from 'vue';
import VueGridDesigner from '@thefootonline/vue-grid-designer';

2. Register the component.

// global component
Vue.component('vue-grid-designer', VueGridDesigner);

// locally
export default {
  components: { VueGridDesigner }

3. Add the grid designer to the template.

     <vue-grid-designer v-model="grid"></vue-grid-designer>
export default { 
  components: { VueGridDesigner },
  data () {
    return {
      grid: [{
        blocks: [{ 
          span: 1,
          content: '<p>1</p>'
          span: 2,
          content: '<p>2</p>'
          span: 3,
          content: '<p>3</p>'

4. Props available.

// The v-model grid data; rows and blocks
value: {
  type   : Array,
  default: () => []
// Component mode - edit or view
mode: {
  type     : String,
  default  : 'edit',
  validator: ( prop ) => [ 'edit', 'view' ].includes ( prop )
// Logical blocks per row
blocksPerRow: {
  type   : Number,
  default: 4
// Maximum number of rows
maxRows: {
  type   : Number,
  default: 0
// CSS row class
rowClass: {
  type   : String,
  default: ''
// CSS block class
blockClass: {
  type   : String,
  default: ''
// Minimum block height - in pixels
minBlockHeight: {
  type   : Number,
  default: 100
// Block margin - in pixels
blockMargin: {
  type   : Number,
  default: 6
// Allow blocks to be moved between rows
enableMoveBlocksBetweenRows: {
  type   : Boolean,
  default: true
// New row callback - allows decoration of the new row object (async)
onNewRow: {
  type   : Function
// New block callback - allows decoration of the new block object (async)
onNewBlock: {
  type   : Function
SortableJS Props with local defaults and managed locally
// CSS Class for the ghost position indicator element
sortableGhostClass: {
  type   : String,
  default: 'vgd__block--ghost'
// CSS Class for the selected element
sortableChosenClass: {
  type   : String,
  default: 'vgd__block--chosen'
// CSS Class for the element when dragged
sortableDragClass: {
  type   : String,
  default: 'vgd__block--drag'
// Animation speed. 0 for no animation
sortableAnimation: {
  type   : Number,
  default: 50
// Pass-thru remaining SortableJS options
sortableOptions: {
  type   : Object,
  default: () => {

Component Props

modemodeStringeditComponent mode – edit or view. View mode hides row and block controls, and displays any content passed in via block.content.
blocksPerRowblocks-per-rowNumber4Logical blocks per row. Each block can consume more than one logical block via span – like a table. But, like a responsive grid, you can exceed this number if you wish.
maxRowsmax-rowsNumber0Maximum number of rows. 0 to disable. If you pass in a grid that exceeds this number, it will still display all rows, however if you remove the rows, you cannot add them back.
rowClassrow-classString Pass in an additional CSS class for the grid row.
blockClassblock-classString Pass in an additional CSS class for the grid block.
minBlockHeightmin-block-heightNumber100Minimum block height in pixels.
blockMarginblock-marginNumber6Block margin in pixels.
enableMoveBlocksBetweenRowsenable-more-blocks-between-rowsBooleantrueAllow blocks to be moved between different rows. Setting to false restricts blocks to their own row.
sortableOptionssortable-optionsObject{}Native options passed directly through to the SortableJS constructor. Some options are overridden (see table below).
onNewRowon-new-rowFunction Callback for creating a custom row object. No parameters. Return a new row object.
onNewBlockon-new-blockFunction Callback for creating a custom block object. Receives ( row, span ) params. Return a new block object.

Overidden Sortable JS Options

PropAttrSortableJS OptionTypeDefaultDescription
sortableGhostClasssortable-ghost-classghostClassStringvgd__block--ghostCSS class applied to the ghost element.
sortableChosenClasssortable-chosen-classchosenClassStringvgd__block--chosenCSS class applied to the chosen element.
sortableDragClasssortable-drag-classdragClassStringvgd__block--dragCSS class applied to the dragged element.
sortableAnimationsortable-animationanimationNumber50Animation speed in ms0 to disable animations.
 disabledBooleanBased on the mode prop. In view mode, the DnD functionality is disabled.
 groupStringvgdBased on the enableMoveBlocksBetweenRows prop. to disable grid elements from being dragged (toolbars).
 preventOnFilterBooleantrueRelated to filter.
 onUpdateFunctionUsed internally. See events table below.
 onRemoveFunctionUsed internally. See events table below.
 onAddFunctionUsed internally. See events table below.
 onStartFunctionUsed internally. See events table below.
 onEndFunctionUsed internally. See events table below.


Methods that receive an event parameter fire a custom event.

getFullModel()Return the full internal model including custom properties.
addRow( event )Append a new row to the grid.
addBlock( event, row, span = 1 )Append a new block to a row.
deleteRow( event, row )Delete a row from the grid.
deleteBlock( event, row, block )Delete a block from a row.
expandBlock( event, row, block, num = 1 )Decrease the span for a given block.
collapseBlock( event, row, block, num = 1 )Increase the span for a given block.
getEventData( event, sourceRow = 'from' )Return a vgd info object for a given event. sourceRow can be from or to.
getBlockStyles( row, block )Return a style object for a given block. Can be used with :style="getBlockStyles(...)".
getAnimationStyle()Return the animation style object. Can be used with :style="getAnimationStyle()".
initGrid()Initialise the grid. Called from mounted().
initSortableRow( row )Initialise the SortableJS plugin for a given row.
fireChanged()Trigger the input event. Used for v-model support.

Sortable Grid Layout Builder, Vue Grid Designer Plugin/Github

See Demo And Download

Official Website(TheFoot): Click Here

This superior jQuery/javascript plugin is developed by TheFoot. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.