vuetify setup completed

abhay-111 · Jun 3, 2022 · 296d0d5 · 296d0d5
1 parent 118a680
commit 296d0d5
Show file tree

Hide file tree

Showing 18 changed files with 209 additions and 214 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vuetify": "^2.6.0",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
@@ -25,6 +26,10 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.2.1",
-    "vue-template-compiler": "^2.6.11"
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-vuetify": "~2.5.1",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.7.0"
   }
 }
diff --git a/public/W-safe.png b/public/W-safe.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <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>
+    <link rel="icon" href="<%= BASE_URL %>W-safe.png">
+    <title>Wsafe</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+    <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/src/App.vue b/src/App.vue
@@ -1,28 +1,19 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
-  </div>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+<script>
+import "./assets/css/global.css";
+export default {
+  name: "App",
 
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-</style>
+  data: () => ({
+    //
+  }),
+};
+</script>
+<style></style>
diff --git a/src/assets/W-safe.png b/src/assets/W-safe.png
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
@@ -0,0 +1,9 @@
+*{
+    margin: 0%;
+    padding: 0%;
+    box-sizing: border-box;
+}
+.brand-logo{
+    height: 300px;
+    width: 300px;
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/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";
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
+  vuetify,
   render: (h) => h(App),
 }).$mount("#app");
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -0,0 +1,6 @@
+import Vue from "vue";
+import Vuetify from "vuetify/lib/framework";
+
+Vue.use(Vuetify);
+
+export default new Vuetify({});
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,23 +1,12 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
-
+import HomeView from "../views/HomeView.vue";
 Vue.use(VueRouter);
 
 const routes = [
   {
+    component: HomeView,
     path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
 ];
 

diff --git a/src/views/About.vue b/src/views/About.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -0,0 +1,20 @@
+<template>
+  <v-container fluid class="fill-height">
+    <v-row class="fill-height">
+      <v-col cols="6" align="center" justify="center">
+        <v-container fluid>
+          <v-img class="brand-logo" src="../assets/W-safe.png" alt=""></v-img>
+        </v-container>
+      </v-col>
+
+      <v-col cols="6" align="center" justify="center"> ABhay </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+// import logo from "";
+export default {
+  name: "Home",
+};
+</script>
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  transpileDependencies: ["vuetify"],
+};