feat: added vuetify

Author: mariush2

.eslintrc.js

@@ -1,32 +1,18 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: ['plugin:vue/recommended', 'prettier', 'prettier/vue'],
+  plugins: ['prettier', 'vue'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-    "prettier/prettier": [
-      "warn",
-      {
-	"singleQuote": true,
-	"trailingComma": "es5"
-      }
-    ]
-  },
-  parserOptions: {
-    parser: "babel-eslint"
+    'prettier/prettier': 'error',
   },
+  parserOptions: { parser: 'babel-eslint' },
   overrides: [
     {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: { jest: true },
+    },
+  ],
 };

.prettierrc

@@ -0,0 +1,6 @@
+{
+  trailingComma: "es5",
+  singleQuote: true,
+  htmlWhitespaceSensitivity: "ignore",
+  printWidth: 100
+}

babel.config.js

@@ -1,3 +1 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+module.exports = { presets: ['@vue/cli-plugin-babel/preset'] };

jest.config.js

@@ -1,3 +1 @@
-module.exports = {
-  preset: "@vue/cli-plugin-unit-jest"
-};
+module.exports = { preset: '@vue/cli-plugin-unit-jest' };

package-lock.json

@@ -10,10 +10,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.2",
     "core-js": "^3.3.2",
     "register-service-worker": "^1.6.2",
+    "roboto-fontface": "*",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
+    "vuetify": "^2.1.9",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
@@ -28,12 +31,17 @@
     "@vue/eslint-config-prettier": "^5.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
+    "deepmerge": "^4.2.2",
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^5.0.0",
+    "fibers": "^4.0.2",
     "node-sass": "^4.12.0",
     "prettier": "^1.18.2",
+    "sass": "^1.23.3",
     "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-cli-plugin-vuetify": "^1.1.1",
+    "vue-template-compiler": "^2.6.10",
+    "vuetify-loader": "^1.3.0"
   }
 }

package.json

@@ -1,5 +1 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-};
+module.exports = { plugins: { autoprefixer: {} } };

postcss.config.js

@@ -1,32 +1,33 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
-  </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;
-}
+  <v-app>
+    <v-app-bar app>
+      <v-toolbar-title class="headline text-uppercase">
+        <span>Vuetify</span>
+        <span class="font-weight-light">MATERIAL DESIGN</span>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn text href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank">
+        <span class="mr-2">Latest Release</span>
+        <v-icon>fas fa-external-link-alt</v-icon>
+      </v-btn>
+    </v-app-bar>
 
-#nav {
-  padding: 30px;
+    <v-content>
+      <HelloWorld />
+    </v-content>
+  </v-app>
+</template>
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+<script>
+import HelloWorld from './components/HelloWorld';
 
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+export default {
+  name: 'App',
+  components: {
+    HelloWorld,
+  },
+  data: () => ({
+    //
+  }),
+};
+</script>