[add] Add Vuetify

nwtgck · Nov 23, 2019 · 4cde571 · 4cde571
1 parent d4fd030
commit 4cde571
Show file tree

Hide file tree

Showing 10 changed files with 329 additions and 77 deletions.
diff --git a/vuetify-loader-cannot-read-match-of-undefined/package-lock.json b/vuetify-loader-cannot-read-match-of-undefined/package-lock.json
diff --git a/vuetify-loader-cannot-read-match-of-undefined/package.json b/vuetify-loader-cannot-read-match-of-undefined/package.json
@@ -13,7 +13,8 @@
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.3.0"
+    "vue-property-decorator": "^8.3.0",
+    "vuetify": "^2.1.0"
   },
   "devDependencies": {
     "@types/chai": "^4.1.0",
@@ -30,7 +31,11 @@
     "chai": "^4.1.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "sass": "^1.19.0",
+    "sass-loader": "^8.0.0",
     "typescript": "~3.5.3",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-vuetify": "^2.0.2",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.1"
   }
 }
diff --git a/vuetify-loader-cannot-read-match-of-undefined/public/index.html b/vuetify-loader-cannot-read-match-of-undefined/public/index.html
@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>vuetify-loader-cannot-read-match-of-undefined</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>

diff --git a/vuetify-loader-cannot-read-match-of-undefined/src/App.vue b/vuetify-loader-cannot-read-match-of-undefined/src/App.vue
@@ -1,29 +1,61 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
+  <v-app>
+    <v-app-bar
+      app
+      color="primary"
+      dark
+    >
+      <div class="d-flex align-center">
+        <v-img
+          alt="Vuetify Logo"
+          class="shrink mr-2"
+          contain
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
+          transition="scale-transition"
+          width="40"
+        />
+
+        <v-img
+          alt="Vuetify Name"
+          class="shrink mt-1 hidden-sm-and-down"
+          contain
+          min-width="100"
+          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
+          width="100"
+        />
+      </div>
+
+      <v-spacer></v-spacer>
+
+      <v-btn
+        href="https://github.com/vuetifyjs/vuetify/releases/latest"
+        target="_blank"
+        text
+      >
+        <span class="mr-2">Latest Release</span>
+        <v-icon>mdi-open-in-new</v-icon>
+      </v-btn>
+    </v-app-bar>
+
+    <v-content>
+      <HelloWorld/>
+    </v-content>
+  </v-app>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import Vue from 'vue'
 import HelloWorld from './components/HelloWorld.vue'
 
-@Component({
+export default Vue.extend({
+  name: 'App',
+
   components: {
     HelloWorld
-  }
+  },
+
+  data: () => ({
+    //
+  })
 })
-export default class App extends Vue {}
 </script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/vuetify-loader-cannot-read-match-of-undefined/src/assets/logo.svg b/vuetify-loader-cannot-read-match-of-undefined/src/assets/logo.svg