vue 위젯

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSmartWidget from "vue-smart-widget";

Vue.use(VueSmartWidget);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <GridWidget/>
  </div>
</template>

<script>
import GridWidget from "./components/GridWidget";

export default {
  name: "App",
  components: {
    GridWidget
  }
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  background-color: #f5f7fb;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}
</style>

widget.vue

<template>
  <div class="grid-widget">
    <smart-widget-grid :layout="layout">
      <smart-widget slot="0" simple>
        <div class="layout-center">
          <h3>Simple Widget</h3>
          <h4>Drag on me</h4>
        </div>
      </smart-widget>
      <smart-widget slot="1" title="Default Widget" sub-title="Drag on me">
        <div class="layout-center">
          <h3>Widget with Header</h3>
        </div>
      </smart-widget>
      <smart-widget slot="2" title="Full Screen" sub-title="Drag on me" fullscreen>
        <div class="layout-center">
          <h3>Make any widget full screen</h3>
        </div>
      </smart-widget>
    </smart-widget-grid>
  </div>
</template>

<script>
export default {
  name: "GridWidget",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 4, i: "0" },
        { x: 4, y: 0, w: 4, h: 4, i: "1" },
        { x: 8, y: 0, w: 4, h: 4, i: "2" }
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

package.json

{
  "name": "vuesmartwidget",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "3.4.2",
    "vue": "2.6.10",
    "vue-smart-widget": "0.6.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.0.5",
    "@vue/cli-plugin-eslint": "4.0.5",
    "@vue/cli-service": "4.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "keywords": [],
  "description": "Grid Widget"
}

오늘도... 해냈다....