casa.vue

<template>
   <!-- root node required -->
   <div>
      <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :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">
            {{content[item.i].text}}
         </grid-item>
      </grid-layout>
   </div>
</template>

<script>
  import abas from 'components/tela/abas.vue'
  
  export default {
    data() {
      return {
        layout:  [
          {"i": "0", "x": 0, "y": 0, "w": 2, "h": 16,},
          {"i": "1", "x": 2, "y": 0, "w": 5, "h": 9,},
          {"i": "2", "x": 7, "y": 0, "w": 5, "h": 9,},
          {"i": "3", "x": 2, "y": 9, "w": 5, "h": 2,},
          {"i": "4", "x": 2, "y": 11, "w": 5, "h": 5,},
          {"i": "5", "x": 7, "y": 9, "w": 2, "h": 7,},
          {"i": "6", "x": 9, "y": 9, "w": 3, "h": 7,},
        ],
        content: [
          {text: abas},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
          {text:"ahahaha"},
        ]
      }
    }
  }
</script>

<style>
   .vue-grid-item:not(.vue-grid-placeholder) {
      background: #CCC;
      border:     1px solid black;
   }
</style>

main.js

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
// require(`./themes/app.${__THEME}.styl`)
// 2. or, use next line to activate DEFAULT QUASAR STYLE
require(`quasar/dist/quasar.${__THEME}.css`)
// ==============================

import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'
import VueGridLayout from 'vue-grid-layout'

Vue.use(Quasar) // Install Quasar Framework

import abas from 'components/tela/abas.vue'
import lancear from 'components/tela/lancear.vue'
import galeria from 'components/tela/galeria.vue'

Vue.component('abas', abas)
Vue.component('galeria', galeria)
Vue.component('lancear', lancear)

let GridLayout = VueGridLayout.GridLayout;
let GridItem   = VueGridLayout.GridItem;

Vue.component('GridLayout', GridLayout)
Vue.component('GridItem', GridItem)

Quasar.start(() => {
  /* eslint-disable no-new */
  new Vue({
    el:     '#q-app',
    router,
    render: h => h(require('./App'))
  })
})