Implement vue-metarial and start with ui

package-lock.json

@@ -5510,6 +5510,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format-thousands": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/format-thousands/-/format-thousands-1.1.1.tgz",
+      "integrity": "sha1-eXW+4wM42QBjkNpYMdsLQcMj+/o="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5719,6 +5724,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.18.1.tgz",
+      "integrity": "sha512-s3I3D3d0lNIflVBRFHsCoIkNfSZqBO6ivzWjNdoefBf+7TPMLgXiFoezr8M6SABiYCjZ8UXB3sIxa+ZxTKmWHw=="
+    },
     "glob": {
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -7656,6 +7666,11 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -8093,6 +8108,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -11107,8 +11127,7 @@
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-      "dev": true
     },
     "tslint": {
       "version": "5.20.1",
@@ -11536,6 +11555,24 @@
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
       "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w=="
     },
+    "vue-github-button": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-1.3.0.tgz",
+      "integrity": "sha512-Cc92t+GBLwBPhwtHSvKXjbx07U3+6xdi+eR+s9c734tHbndipCLenJjLVkgErNhKZ0EvDjRyuu8Hu69gg9/TxQ==",
+      "requires": {
+        "github-buttons": "^2.8.0"
+      }
+    },
+    "vue-github-buttons": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-github-buttons/-/vue-github-buttons-3.1.0.tgz",
+      "integrity": "sha512-x0b9bdhP5xZOD5kQ9+nnCzvKqVyHb4moqN2l06mjYB/k2WRdW5jiAWlneUgoPFwPvcqM40vrTDXVvBrS0MMlEQ==",
+      "requires": {
+        "format-thousands": "^1.1.1",
+        "node-fetch": "^2.3.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -11644,6 +11681,17 @@
         }
       }
     },
+    "vue-material": {
+      "version": "1.0.0-beta-15",
+      "resolved": "https://registry.npmjs.org/vue-material/-/vue-material-1.0.0-beta-15.tgz",
+      "integrity": "sha512-nNC1mF1BQNKsyEjRXPYxweYlIOcVE9rK4LeeyppOU6h4vgQnZuNmlGIRnl6fUe8dj+x7c5x5/qydLhJRabPMng==",
+      "requires": {
+        "opencollective-postinstall": "^2.0.2",
+        "vue-github-button": "^1.2.0",
+        "vue-github-buttons": "^3.1.0",
+        "vue-toc": "0.0.1"
+      }
+    },
     "vue-property-decorator": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
@@ -11688,6 +11736,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-toc": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/vue-toc/-/vue-toc-0.0.1.tgz",
+      "integrity": "sha512-RZfVgLzk/kpEmk05ptvU/+x3TVo4Ai4BBARvV4iCurR9bJsAqnnrqwjEBKnEG+s6NT0yQ6EY0JMGViyOUGysDw==",
+      "requires": {
+        "vue": "^2.6.10"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-material": "^1.0.0-beta-15",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

public/index.html

@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
-  <body>
+</head>
-    <noscript>
+<body>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+<noscript>
-    </noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-    <div id="app"></div>
+        Please enable it to continue.</strong>
-    <!-- built files will be auto injected -->
+</noscript>
-  </body>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>

src/App.vue

@@ -4,21 +4,20 @@
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </div>
-    <router-view/>
+    <div class="page-container">
+      <md-app>
+        <md-app-content>
+          <router-view/>
+        </md-app-content>
+      </md-app>
+    </div>
   </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
 #nav {
   padding: 30px;
+  text-align: center;
 
   a {
     font-weight: bold;
@@ -29,4 +28,9 @@
     }
   }
 }
+
+.page-container {
+  width: 1024px;
+  margin: auto;
+}
 </style>

src/components/HelloWorld.vue

@@ -1,40 +1,33 @@
 <template>
-  <div class="hello">
+  <div>
     <h1>{{ msg }}</h1>
-    <p>
+
-      For a guide and recipes on how to configure / customize this project,<br>
+    <md-button class="md-raised">Test button!</md-button>
-      check out the
+    <md-field>
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <label>Initial Value</label>
-    </p>
+      <md-input v-model="initial"></md-input>
-    <h3>Installed CLI Plugins</h3>
+    </md-field>
-    <ul>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-    </ul>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-    <h3>Essential Links</h3>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-    <ul>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-    </ul>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
-    <h3>Ecosystem</h3>
+      similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import {Component, Prop, Vue} from 'vue-property-decorator'
 
 @Component
 export default class HelloWorld extends Vue {
@@ -47,14 +40,17 @@ export default class HelloWorld extends Vue {
 h3 {
   margin: 40px 0 0;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
 }
+
 li {
   display: inline-block;
   margin: 0 10px;
 }
+
 a {
   color: #42b983;
 }

src/router/index.ts

@@ -1,6 +1,18 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default-dark.css'
+
+import MdButton from 'vue-material/dist/components/MdButton';
+import MdField from 'vue-material/dist/components/MdField';
+import MdApp from 'vue-material/dist/components/MdApp';
+import MdAppContent from 'vue-material/dist/components/MdContent';
+Vue.use(MdButton);
+Vue.use(MdField);
+Vue.use(MdApp);
+Vue.use(MdAppContent);
+
 Vue.use(VueRouter)
 
 const routes: Array<RouteConfig> = [

src/services/PerudoApi.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
-import {ApiObject, CreateGameObject} from "@/objects/objects";
+import {CreateGameObject} from "@/objects/objects";
 
 export default class PerudoApi {
   private static baseUrl = 'http://localhost:8000/'

src/typings/vue-material.d.ts

@@ -0,0 +1,5 @@
+declare module 'vue-material';
+declare module 'vue-material/dist/components/MdButton';
+declare module 'vue-material/dist/components/MdField';
+declare module 'vue-material/dist/components/MdApp';
+declare module 'vue-material/dist/components/MdContent';

src/views/About.vue

@@ -3,3 +3,9 @@
     <h1>This is an about page</h1>
   </div>
 </template>
+
+<style scoped lang="scss">
+.about {
+  text-align: center;
+}
+</style>

src/views/Home.vue

@@ -13,7 +13,7 @@ import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
 
 @Component({
   components: {
-    HelloWorld
+    HelloWorld,
   }
 })
 export default class Home extends Vue {