add vuetify

package-lock.json

@@ -11171,6 +11171,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.3.15.tgz",
+      "integrity": "sha1-6hSKzOj1vCcvZPA6DSrOCeWOCSw="
+    },
     "vuex": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.5.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vuetify": "^2.3.15",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/components/TestVuetify.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer v-model="drawer" app>
+      <!--  -->
+    </v-navigation-drawer>
+
+    <v-app-bar app>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-app-bar>
+
+    <v-main>
+      <!--  -->
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data: () => ({ drawer: null }),
+};
+</script>

src/main.js

@@ -2,11 +2,13 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import vuetify from "@/plugins/vuetify"; // path to vuetify export
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App)
+  vuetify,
+  render: (h) => h(App),
 }).$mount("#app");

src/plugins/vuetify.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+
+Vue.use(Vuetify);
+
+const opts = {};
+
+export default new Vuetify(opts);

src/views/About.vue

@@ -1,9 +1,21 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <test-vuetify></test-vuetify>
   </div>
 </template>
 
+<script>
+import TestVuetify from "@/components/TestVuetify.vue";
+
+export default {
+  name: "About",
+  components: {
+    TestVuetify
+  }
+};
+</script>
+
 <style lang="scss" scoped>
 h1 {
   color: green;

webpack.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s(c|a)ss$/,
+        use: [
+          "vue-style-loader",
+          "css-loader",
+          {
+            loader: "sass-loader",
+            // Requires sass-loader@^7.0.0
+            options: {
+              implementation: require("sass"),
+              indentedSyntax: true, // optional
+            },
+            // Requires sass-loader@^8.0.0
+            options: {
+              implementation: require("sass"),
+              sassOptions: {
+                indentedSyntax: true, // optional
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};