1. Advisor
  2. vue-grid-layout
  3. vue-grid-layout code examples
View all vue-grid-layout analysis

How to use vue-grid-layout - 10 common examples

To help you get started, we’ve selected a few vue-grid-layout examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github JKHeadley / appy-backend / frontend / src / main.js View on Github external
return qs.stringify(params)
}

// EXPL: Register global components and plugins
Vue.component('box', Box)
Vue.component('vue-form-input', VueFormInput)
Vue.component('chat-box', ChatBox)
Vue.component('new-group-chat', NewGroupChat)
Vue.component('vue-editor', VueEditor)
Vue.component('visitor-map', VistorMap)
Vue.component('pulse-loader', PulseLoader)
Vue.component('vue-select', VueSelect)
Vue.component('vue-password', VuePassword)
Vue.component('vue-masked-input', VueMaskedInput)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.use(VueRouter)
Vue.use(RestHapiRepository, { httpClient, resources, log: true })
Vue.use(ServerTable, {}, false)
Vue.use(VueForm, {
  inputClasses: {
    valid: 'form-control-success',
    invalid: 'form-control-danger'
  }
})
Vue.use(Snotify, {
  toast: {
    position: SnotifyPosition.rightTop
  }
})
Vue.use(ToggleButton)
Vue.use(VueMoment)
github oeway / ImJoy / web / src / main.js View on Github external
Vue.use(VueMaterial)

// register
Vue.component('navbar', Navbar)
Vue.component('imjoy', Imjoy)
Vue.component('main-footer', Footer)
Vue.component('about', About)
Vue.component('whiteboard', Whiteboard)
Vue.component('joy', Joy)
Vue.component('plugin-list', PluginList)
Vue.component('plugin-editor', PluginEditor)
Vue.component('file-item', FileItem)
Vue.component('file-dialog', FileDialog)
Vue.component('window', Window)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.component('engine-control-panel', EngineControlPanel)

const truncate = function(text, length, clamp) {
  clamp = clamp || '...';
  const node = document.createElement('div');
  node.innerHTML = text;
  const content = node.textContent;
  return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', truncate);

/* eslint-disable no-new */
new Vue({
  el: '#imjoy-app',
  router,
github oeway / ImJoy / web / src / main.js View on Github external
Vue.use(VueMaterial)

// register
Vue.component('navbar', Navbar)
Vue.component('imjoy', Imjoy)
Vue.component('main-footer', Footer)
Vue.component('about', About)
Vue.component('whiteboard', Whiteboard)
Vue.component('joy', Joy)
Vue.component('plugin-list', PluginList)
Vue.component('plugin-editor', PluginEditor)
Vue.component('file-item', FileItem)
Vue.component('file-dialog', FileDialog)
Vue.component('window', Window)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.component('engine-control-panel', EngineControlPanel)

const truncate = function(text, length, clamp) {
  clamp = clamp || '...';
  const node = document.createElement('div');
  node.innerHTML = text;
  const content = node.textContent;
  return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', truncate);

/* eslint-disable no-new */
new Vue({
  el: '#imjoy-app',
github Meituan-Dianping / lyrebird / lyrebird-fe / src / views / Home.vue View on Github external
// Vue.component(widget, widgets[widget]);
  layout.push(layout_config[widget]);

  widget_namelist.push(widget);
}

export default {
  name: 'Home',
  data: function() {
    return {
      layout: layout,
      widgets: widget_namelist
    };
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  }
};
github JKHeadley / appy-backend / frontend / src / main.js View on Github external
axios.defaults.paramsSerializer = function (params) {
  return qs.stringify(params)
}

// EXPL: Register global components and plugins
Vue.component('box', Box)
Vue.component('vue-form-input', VueFormInput)
Vue.component('chat-box', ChatBox)
Vue.component('new-group-chat', NewGroupChat)
Vue.component('vue-editor', VueEditor)
Vue.component('visitor-map', VistorMap)
Vue.component('pulse-loader', PulseLoader)
Vue.component('vue-select', VueSelect)
Vue.component('vue-password', VuePassword)
Vue.component('vue-masked-input', VueMaskedInput)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.use(VueRouter)
Vue.use(RestHapiRepository, { httpClient, resources, log: true })
Vue.use(ServerTable, {}, false)
Vue.use(VueForm, {
  inputClasses: {
    valid: 'form-control-success',
    invalid: 'form-control-danger'
  }
})
Vue.use(Snotify, {
  toast: {
    position: SnotifyPosition.rightTop
  }
})
Vue.use(ToggleButton)
github WeBankPartners / open-monitor / monitor-ui / src / views / custom-view / view-config.vue View on Github external
},
    savePanalEdit () {
      if (!this.panalName) {
        this.$Message.warning(this.$t('tips.required'))
        return
      }
      this.saveEdit()
    },
    canclePanalEdit () {
      this.isEditPanal = false
      this.panalName = this.$route.params.name
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    CustomChart,
    CustomPieChart,
    ViewConfigAlarm
  },
}
github WeBankPartners / open-monitor / monitor-ui / src / views / custom-view / view-config.vue View on Github external
this.$router.push({name:'viewConfigIndex'})
    },
    savePanalEdit () {
      if (!this.panalName) {
        this.$Message.warning(this.$t('tips.required'))
        return
      }
      this.saveEdit()
    },
    canclePanalEdit () {
      this.isEditPanal = false
      this.panalName = this.$route.params.name
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    CustomChart,
    CustomPieChart,
    ViewConfigAlarm
  },
}
github sogehige / sogeBot / src / panel / views / dashboard / dashboard.vue View on Github external
commercial: () => import('src/panel/widgets/components/commercial.vue'),
    customvariables: () => import('src/panel/widgets/components/customvariables.vue'),
    eventlist: () => import('src/panel/widgets/components/eventlist.vue'),
    join: () => import('src/panel/widgets/components/join.vue'),
    part: () => import('src/panel/widgets/components/part.vue'),
    queue: () => import('src/panel/widgets/components/queue.vue'),
    raffles: () => import('src/panel/widgets/components/raffles.vue'),
    soundboard: () => import('src/panel/widgets/components/soundboard.vue'),
    spotify: () => import('src/panel/widgets/components/spotify.vue'),
    twitch: () => import('src/panel/widgets/components/twitch.vue'),
    widgetCreate: () => import('src/panel/widgets/components/widget_create.vue'),
    dashboardRemove: () => import('src/panel/widgets/components/dashboard_remove.vue'),
    ytplayer: () => import('src/panel/widgets/components/ytplayer.vue'),
    social: () => import('src/panel/widgets/components/social.vue'),
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data: function () {
    return {
      sortBy,
      items: [],
      dashboards: [],

      dashboardName: '',
      addDashboard: false,
      currentDashboard: 'c287b750-b620-4017-8b3e-e48757ddaa83',
      show: true,
      isLoaded: false,
      layout: {'null': []},
      socket: getSocket('/')
    }
  },
github kaleguy / leovue / alt / DbViewer.vue View on Github external
github WeBankPartners / open-monitor / monitor-ui / src / views / system-monitoring / system-monitoring.vue View on Github external
})
    },
    resizeEvent: function(i, newH, newW, newHPx, newWPx){
      resizeEvent(this, i, newH, newW, newHPx, newWPx)
    },
    gridPlus(item) {
      this.viewData.forEach((vd) => {
        if (item.id === vd.viewConfig.id) {
          this.$router.push({name: 'sysViewChart', params:{templateData: vd, parentData: this.sysConfig}}) 
        }
      })
    },
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
}

vue-grid-layout

A draggable and resizable grid layout, as a Vue component.

GitHub
MIT
Latest version published 2 years ago

Package Health Score

58 / 100
Full package analysis

Popular vue-grid-layout functions

Similar packages