From 432b714db7882a433fa464b14daaa13728f3a28d Mon Sep 17 00:00:00 2001
From: Erik Borgeteien Hansen <erik@erikbhan.no>
Date: Wed, 20 Apr 2022 14:44:36 +0200
Subject: [PATCH] Add Vuetify 3 Beta
---
package-lock.json | 686 +++++++++++++++++++++++++++++++++-
package.json | 12 +-
public/index.html | 2 +-
src/App.vue | 39 +-
src/assets/logo.svg | 1 +
src/components/HelloWorld.vue | 253 ++++++-------
src/main.js | 6 +-
src/plugins/vuetify.js | 9 +
src/plugins/webfontloader.js | 17 +
src/views/HomeView.vue | 16 +-
vue.config.js | 6 +
11 files changed, 877 insertions(+), 170 deletions(-)
create mode 100644 src/assets/logo.svg
create mode 100644 src/plugins/vuetify.js
create mode 100644 src/plugins/webfontloader.js
diff --git a/package-lock.json b/package-lock.json
index 7e27422..448b405 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,14 @@
"name": "frontend",
"version": "0.1.0",
"dependencies": {
+ "@mdi/font": "5.9.55",
"core-js": "^3.8.3",
+ "roboto-fontface": "*",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
- "vuex": "^4.0.0"
+ "vuetify": "^3.0.0-beta.0",
+ "vuex": "^4.0.0",
+ "webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
@@ -30,7 +34,11 @@
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
- "prettier": "^2.4.1"
+ "prettier": "^2.4.1",
+ "sass": "^1.38.0",
+ "sass-loader": "^10.0.0",
+ "vue-cli-plugin-vuetify": "~2.4.8",
+ "vuetify-loader": "^2.0.0-alpha.0"
}
},
"node_modules/@achrinza/node-ipc": {
@@ -2507,6 +2515,11 @@
"integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==",
"dev": true
},
+ "node_modules/@mdi/font": {
+ "version": "5.9.55",
+ "resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.9.55.tgz",
+ "integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg=="
+ },
"node_modules/@node-ipc/js-queue": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -3839,6 +3852,19 @@
"integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
"dev": true
},
+ "node_modules/@vuetify/loader-shared": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.3.0.tgz",
+ "integrity": "sha512-sxLvMYUTQCZJ4u6jS6rSWsjfagzytqylFnDuVcUNi0wy4qq5f1zTrHs5tZfRBppERmexeW3e57vqZAUfZPmfUA==",
+ "dev": true,
+ "dependencies": {
+ "find-cache-dir": "^3.3.2",
+ "upath": "^2.0.1"
+ },
+ "peerDependencies": {
+ "vuetify": "^3.0.0-alpha.11"
+ }
+ },
"node_modules/@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -4866,6 +4892,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/callsite": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+ "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
+ "dev": true,
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -5956,6 +5991,15 @@
}
}
},
+ "node_modules/decache": {
+ "version": "4.6.1",
+ "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
+ "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
+ "dev": true,
+ "dependencies": {
+ "callsite": "^1.0.0"
+ }
+ },
"node_modules/decimal.js": {
"version": "10.3.1",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
@@ -7473,6 +7517,58 @@
"node": "^10.12.0 || >=12.0.0"
}
},
+ "node_modules/file-loader": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+ "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+ "dev": true,
+ "dependencies": {
+ "loader-utils": "^2.0.0",
+ "schema-utils": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "webpack": "^4.0.0 || ^5.0.0"
+ }
+ },
+ "node_modules/file-loader/node_modules/loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "dependencies": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ },
+ "engines": {
+ "node": ">=8.9.0"
+ }
+ },
+ "node_modules/file-loader/node_modules/schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "dependencies": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ }
+ },
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8197,6 +8293,12 @@
"node": ">= 4"
}
},
+ "node_modules/immutable": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+ "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+ "dev": true
+ },
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -8272,6 +8374,15 @@
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true
},
+ "node_modules/interpret": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+ "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+ "dev": true,
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
"node_modules/ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -11827,6 +11938,58 @@
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
+ "node_modules/null-loader": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+ "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+ "dev": true,
+ "dependencies": {
+ "loader-utils": "^2.0.0",
+ "schema-utils": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "webpack": "^4.0.0 || ^5.0.0"
+ }
+ },
+ "node_modules/null-loader/node_modules/loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "dependencies": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ },
+ "engines": {
+ "node": ">=8.9.0"
+ }
+ },
+ "node_modules/null-loader/node_modules/schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "dependencies": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ }
+ },
"node_modules/nwsapi": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -13047,6 +13210,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/querystring": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+ "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+ "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
+ "dev": true,
+ "engines": {
+ "node": ">=0.4.x"
+ }
+ },
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13191,6 +13364,18 @@
"node": ">=8.10.0"
}
},
+ "node_modules/rechoir": {
+ "version": "0.6.2",
+ "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+ "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+ "dev": true,
+ "dependencies": {
+ "resolve": "^1.1.6"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
"node_modules/regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -13427,6 +13612,11 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/roboto-fontface": {
+ "version": "0.10.0",
+ "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+ "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+ },
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -13462,6 +13652,107 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "node_modules/sass": {
+ "version": "1.50.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz",
+ "integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
+ "node_modules/sass-loader": {
+ "version": "10.2.1",
+ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
+ "integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
+ "dev": true,
+ "dependencies": {
+ "klona": "^2.0.4",
+ "loader-utils": "^2.0.0",
+ "neo-async": "^2.6.2",
+ "schema-utils": "^3.0.0",
+ "semver": "^7.3.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "fibers": ">= 3.1.0",
+ "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0",
+ "sass": "^1.3.0",
+ "webpack": "^4.36.0 || ^5.0.0"
+ },
+ "peerDependenciesMeta": {
+ "fibers": {
+ "optional": true
+ },
+ "node-sass": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/sass-loader/node_modules/loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "dependencies": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ },
+ "engines": {
+ "node": ">=8.9.0"
+ }
+ },
+ "node_modules/sass-loader/node_modules/schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "dependencies": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ }
+ },
+ "node_modules/sass-loader/node_modules/semver": {
+ "version": "7.3.7",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+ "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+ "dev": true,
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/saxes": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -13702,6 +13993,23 @@
"integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
"dev": true
},
+ "node_modules/shelljs": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+ "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+ "dev": true,
+ "dependencies": {
+ "glob": "^7.0.0",
+ "interpret": "^1.0.0",
+ "rechoir": "^0.6.2"
+ },
+ "bin": {
+ "shjs": "bin/shjs"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/sigmund": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -14714,6 +15022,16 @@
"node": ">= 0.8"
}
},
+ "node_modules/upath": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+ "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+ "dev": true,
+ "engines": {
+ "node": ">=4",
+ "yarn": "*"
+ }
+ },
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -14820,6 +15138,40 @@
"@vue/shared": "3.2.33"
}
},
+ "node_modules/vue-cli-plugin-vuetify": {
+ "version": "2.4.8",
+ "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.8.tgz",
+ "integrity": "sha512-1e8tVbJNQPLpdJgx8tlsCrFVSKrohLe5axWwolOuMr9k++X1pg95jiqBxYZdhh7tIl9bNh4wzVPPGQzTIpoS+Q==",
+ "dev": true,
+ "dependencies": {
+ "null-loader": "^4.0.1",
+ "semver": "^7.1.2",
+ "shelljs": "^0.8.3"
+ },
+ "peerDependenciesMeta": {
+ "sass-loader": {
+ "optional": true
+ },
+ "vuetify-loader": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/vue-cli-plugin-vuetify/node_modules/semver": {
+ "version": "7.3.7",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+ "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+ "dev": true,
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -15035,6 +15387,66 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "node_modules/vuetify": {
+ "version": "3.0.0-beta.1",
+ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.1.tgz",
+ "integrity": "sha512-698CB/Xlvxku2Tm4AsFrmQ7LzMXOjleX7A5tbyQTnhPyt0NI1OTkf5zJUoXL3TNi2TN7DglN+adI6AE69e6CeQ==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/johnleider"
+ },
+ "peerDependencies": {
+ "@formatjs/intl": "^1.0.0 || ^2.0.0",
+ "vue": "^3.2.31",
+ "vue-i18n": "^9.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@formatjs/intl": {
+ "optional": true
+ },
+ "vue-i18n": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/vuetify-loader": {
+ "version": "2.0.0-alpha.9",
+ "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-2.0.0-alpha.9.tgz",
+ "integrity": "sha512-M4u2XX9coe1U51jLKek54eJTo7wnroNfglh6sQplRTslhQRKQM3k84oh87D0VHqTzoTzlKPHP0sIWdpklwaEEQ==",
+ "dev": true,
+ "dependencies": {
+ "@vuetify/loader-shared": "^1.3.0",
+ "decache": "^4.6.0",
+ "file-loader": "^6.2.0",
+ "find-cache-dir": "^3.3.2",
+ "loader-utils": "^2.0.0",
+ "null-loader": "^4.0.1",
+ "querystring": "^0.2.1",
+ "upath": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/compiler-sfc": "^3.2.6",
+ "vuetify": "^3.0.0-alpha.11",
+ "webpack": "^5.0.0"
+ }
+ },
+ "node_modules/vuetify-loader/node_modules/loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "dependencies": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ },
+ "engines": {
+ "node": ">=8.9.0"
+ }
+ },
"node_modules/vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -15107,6 +15519,11 @@
"defaults": "^1.0.3"
}
},
+ "node_modules/webfontloader": {
+ "version": "1.6.28",
+ "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+ "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+ },
"node_modules/webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -17625,6 +18042,11 @@
"integrity": "sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==",
"dev": true
},
+ "@mdi/font": {
+ "version": "5.9.55",
+ "resolved": "https://registry.npmjs.org/@mdi/font/-/font-5.9.55.tgz",
+ "integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg=="
+ },
"@node-ipc/js-queue": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
@@ -18732,6 +19154,16 @@
"integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
"dev": true
},
+ "@vuetify/loader-shared": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.3.0.tgz",
+ "integrity": "sha512-sxLvMYUTQCZJ4u6jS6rSWsjfagzytqylFnDuVcUNi0wy4qq5f1zTrHs5tZfRBppERmexeW3e57vqZAUfZPmfUA==",
+ "dev": true,
+ "requires": {
+ "find-cache-dir": "^3.3.2",
+ "upath": "^2.0.1"
+ }
+ },
"@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -19519,6 +19951,12 @@
"get-intrinsic": "^1.0.2"
}
},
+ "callsite": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+ "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
+ "dev": true
+ },
"callsites": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -20322,6 +20760,15 @@
"ms": "2.1.2"
}
},
+ "decache": {
+ "version": "4.6.1",
+ "resolved": "https://registry.npmjs.org/decache/-/decache-4.6.1.tgz",
+ "integrity": "sha512-ohApBM8u9ygepJCjgBrEZSSxPjc0T/PJkD+uNyxXPkqudyUpdXpwJYp0VISm2WrPVzASU6DZyIi6BWdyw7uJ2Q==",
+ "dev": true,
+ "requires": {
+ "callsite": "^1.0.0"
+ }
+ },
"decimal.js": {
"version": "10.3.1",
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
@@ -21457,6 +21904,40 @@
"flat-cache": "^3.0.4"
}
},
+ "file-loader": {
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+ "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+ "dev": true,
+ "requires": {
+ "loader-utils": "^2.0.0",
+ "schema-utils": "^3.0.0"
+ },
+ "dependencies": {
+ "loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ },
+ "schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "requires": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ }
+ }
+ }
+ },
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -21983,6 +22464,12 @@
"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
"dev": true
},
+ "immutable": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+ "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+ "dev": true
+ },
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -22039,6 +22526,12 @@
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true
},
+ "interpret": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+ "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+ "dev": true
+ },
"ipaddr.js": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -24710,6 +25203,40 @@
"boolbase": "^1.0.0"
}
},
+ "null-loader": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+ "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+ "dev": true,
+ "requires": {
+ "loader-utils": "^2.0.0",
+ "schema-utils": "^3.0.0"
+ },
+ "dependencies": {
+ "loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ },
+ "schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "requires": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ }
+ }
+ }
+ },
"nwsapi": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -25552,6 +26079,12 @@
"integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
"dev": true
},
+ "querystring": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+ "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+ "dev": true
+ },
"queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -25658,6 +26191,15 @@
"picomatch": "^2.2.1"
}
},
+ "rechoir": {
+ "version": "0.6.2",
+ "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+ "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+ "dev": true,
+ "requires": {
+ "resolve": "^1.1.6"
+ }
+ },
"regenerate": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -25837,6 +26379,11 @@
"glob": "^7.1.3"
}
},
+ "roboto-fontface": {
+ "version": "0.10.0",
+ "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+ "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+ },
"run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -25858,6 +26405,63 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "sass": {
+ "version": "1.50.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz",
+ "integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==",
+ "dev": true,
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
+ "sass-loader": {
+ "version": "10.2.1",
+ "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.1.tgz",
+ "integrity": "sha512-RRvWl+3K2LSMezIsd008ErK4rk6CulIMSwrcc2aZvjymUgKo/vjXGp1rSWmfTUX7bblEOz8tst4wBwWtCGBqKA==",
+ "dev": true,
+ "requires": {
+ "klona": "^2.0.4",
+ "loader-utils": "^2.0.0",
+ "neo-async": "^2.6.2",
+ "schema-utils": "^3.0.0",
+ "semver": "^7.3.2"
+ },
+ "dependencies": {
+ "loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ },
+ "schema-utils": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+ "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+ "dev": true,
+ "requires": {
+ "@types/json-schema": "^7.0.8",
+ "ajv": "^6.12.5",
+ "ajv-keywords": "^3.5.2"
+ }
+ },
+ "semver": {
+ "version": "7.3.7",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+ "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+ "dev": true,
+ "requires": {
+ "lru-cache": "^6.0.0"
+ }
+ }
+ }
+ },
"saxes": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -26066,6 +26670,17 @@
"integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
"dev": true
},
+ "shelljs": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+ "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+ "dev": true,
+ "requires": {
+ "glob": "^7.0.0",
+ "interpret": "^1.0.0",
+ "rechoir": "^0.6.2"
+ }
+ },
"sigmund": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -26839,6 +27454,12 @@
"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
"dev": true
},
+ "upath": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+ "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+ "dev": true
+ },
"uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -26931,6 +27552,28 @@
"@vue/shared": "3.2.33"
}
},
+ "vue-cli-plugin-vuetify": {
+ "version": "2.4.8",
+ "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.4.8.tgz",
+ "integrity": "sha512-1e8tVbJNQPLpdJgx8tlsCrFVSKrohLe5axWwolOuMr9k++X1pg95jiqBxYZdhh7tIl9bNh4wzVPPGQzTIpoS+Q==",
+ "dev": true,
+ "requires": {
+ "null-loader": "^4.0.1",
+ "semver": "^7.1.2",
+ "shelljs": "^0.8.3"
+ },
+ "dependencies": {
+ "semver": {
+ "version": "7.3.7",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+ "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+ "dev": true,
+ "requires": {
+ "lru-cache": "^6.0.0"
+ }
+ }
+ }
+ },
"vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -27095,6 +27738,40 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vuetify": {
+ "version": "3.0.0-beta.1",
+ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.1.tgz",
+ "integrity": "sha512-698CB/Xlvxku2Tm4AsFrmQ7LzMXOjleX7A5tbyQTnhPyt0NI1OTkf5zJUoXL3TNi2TN7DglN+adI6AE69e6CeQ=="
+ },
+ "vuetify-loader": {
+ "version": "2.0.0-alpha.9",
+ "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-2.0.0-alpha.9.tgz",
+ "integrity": "sha512-M4u2XX9coe1U51jLKek54eJTo7wnroNfglh6sQplRTslhQRKQM3k84oh87D0VHqTzoTzlKPHP0sIWdpklwaEEQ==",
+ "dev": true,
+ "requires": {
+ "@vuetify/loader-shared": "^1.3.0",
+ "decache": "^4.6.0",
+ "file-loader": "^6.2.0",
+ "find-cache-dir": "^3.3.2",
+ "loader-utils": "^2.0.0",
+ "null-loader": "^4.0.1",
+ "querystring": "^0.2.1",
+ "upath": "^2.0.1"
+ },
+ "dependencies": {
+ "loader-utils": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+ "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+ "dev": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ }
+ }
+ },
"vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
@@ -27158,6 +27835,11 @@
"defaults": "^1.0.3"
}
},
+ "webfontloader": {
+ "version": "1.6.28",
+ "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+ "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+ },
"webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
diff --git a/package.json b/package.json
index 0ccd655..fe5b5c4 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,14 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "@mdi/font": "5.9.55",
"core-js": "^3.8.3",
+ "roboto-fontface": "*",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
- "vuex": "^4.0.0"
+ "vuetify": "^3.0.0-beta.0",
+ "vuex": "^4.0.0",
+ "webfontloader": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
@@ -31,6 +35,10 @@
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
- "prettier": "^2.4.1"
+ "prettier": "^2.4.1",
+ "sass": "^1.38.0",
+ "sass-loader": "^10.0.0",
+ "vue-cli-plugin-vuetify": "~2.4.8",
+ "vuetify-loader": "^2.0.0-alpha.0"
}
}
diff --git a/public/index.html b/public/index.html
index 3e5a139..4123528 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="">
+<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/App.vue b/src/App.vue
index e0d60f4..5b76f23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,17 @@
<template>
- <nav>
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
- </nav>
- <router-view />
+ <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>
+export default {
+ name: "App",
-nav {
- padding: 30px;
-}
-
-nav a {
- font-weight: bold;
- color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
- color: #42b983;
-}
-</style>
+ data: () => ({
+ //
+ }),
+};
+</script>
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..145b6d1
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 7eb097d..84bd14e 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,138 +1,131 @@
<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br />
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
- >vue-cli documentation</a
- >.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
- target="_blank"
- rel="noopener"
- >babel</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
- target="_blank"
- rel="noopener"
- >router</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
- target="_blank"
- rel="noopener"
- >vuex</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
- target="_blank"
- rel="noopener"
- >eslint</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
- target="_blank"
- rel="noopener"
- >unit-jest</a
- >
- </li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li>
- <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
- </li>
- <li>
- <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
- >Forum</a
- >
- </li>
- <li>
- <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
- >Community Chat</a
- >
- </li>
- <li>
- <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
- >Twitter</a
- >
- </li>
- <li>
- <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
- </li>
- </ul>
- <h3>Ecosystem</h3>
- <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>
+ <v-container>
+ <v-row class="text-center">
+ <v-col cols="12">
+ <v-img
+ :src="require('../assets/logo.svg')"
+ class="my-3"
+ contain
+ height="200"
+ />
+ </v-col>
+
+ <v-col class="mb-4">
+ <h1 class="display-2 font-weight-bold mb-3">
+ Welcome to the Vuetify 3 Beta
+ </h1>
+
+ <p class="subheading font-weight-regular">
+ For help and collaboration with other Vuetify developers,
+ <br />please join our online
+ <a href="https://community.vuetifyjs.com" target="_blank"
+ >Discord Community</a
+ >
+ </p>
+ </v-col>
+
+ <v-col class="mb-5" cols="12">
+ <h2 class="headline font-weight-bold mb-5">What's next?</h2>
+
+ <v-row justify="center">
+ <a
+ v-for="(next, i) in whatsNext"
+ :key="i"
+ :href="next.href"
+ class="subheading mx-3"
+ target="_blank"
+ >
+ {{ next.text }}
+ </a>
+ </v-row>
+ </v-col>
+
+ <v-col class="mb-5" cols="12">
+ <h2 class="headline font-weight-bold mb-5">Important Links</h2>
+
+ <v-row justify="center">
+ <a
+ v-for="(link, i) in importantLinks"
+ :key="i"
+ :href="link.href"
+ class="subheading mx-3"
+ target="_blank"
+ >
+ {{ link.text }}
+ </a>
+ </v-row>
+ </v-col>
+
+ <v-col class="mb-5" cols="12">
+ <h2 class="headline font-weight-bold mb-5">Ecosystem</h2>
+
+ <v-row justify="center">
+ <a
+ v-for="(eco, i) in ecosystem"
+ :key="i"
+ :href="eco.href"
+ class="subheading mx-3"
+ target="_blank"
+ >
+ {{ eco.text }}
+ </a>
+ </v-row>
+ </v-col>
+ </v-row>
+ </v-container>
</template>
<script>
export default {
name: "HelloWorld",
- props: {
- msg: String,
- },
+
+ data: () => ({
+ ecosystem: [
+ {
+ text: "vuetify-loader",
+ href: "https://github.com/vuetifyjs/vuetify-loader",
+ },
+ {
+ text: "github",
+ href: "https://github.com/vuetifyjs/vuetify",
+ },
+ {
+ text: "awesome-vuetify",
+ href: "https://github.com/vuetifyjs/awesome-vuetify",
+ },
+ ],
+ importantLinks: [
+ {
+ text: "Chat",
+ href: "https://community.vuetifyjs.com",
+ },
+ {
+ text: "Made with Vuetify",
+ href: "https://madewithvuejs.com/vuetify",
+ },
+ {
+ text: "Twitter",
+ href: "https://twitter.com/vuetifyjs",
+ },
+ {
+ text: "Articles",
+ href: "https://medium.com/vuetify",
+ },
+ ],
+ whatsNext: [
+ {
+ text: "Explore components",
+ href: "https://vuetifyjs.com",
+ },
+ {
+ text: "Roadmap",
+ href: "https://vuetifyjs.com/introduction/roadmap/",
+ },
+ {
+ text: "Frequently Asked Questions",
+ href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
+ },
+ ],
+ }),
};
</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 89ba0ea..19456ca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,5 +2,9 @@ import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
+import vuetify from "./plugins/vuetify";
+import { loadFonts } from "./plugins/webfontloader";
-createApp(App).use(store).use(router).mount("#app");
+loadFonts();
+
+createApp(App).use(router).use(store).use(vuetify).mount("#app");
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 0000000..8968900
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,9 @@
+// Styles
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+// Vuetify
+import { createVuetify } from "vuetify";
+
+export default createVuetify();
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
diff --git a/src/plugins/webfontloader.js b/src/plugins/webfontloader.js
new file mode 100644
index 0000000..e86aa7d
--- /dev/null
+++ b/src/plugins/webfontloader.js
@@ -0,0 +1,17 @@
+/**
+ * plugins/webfontloader.js
+ *
+ * webfontloader documentation: https://github.com/typekit/webfontloader
+ */
+
+export async function loadFonts() {
+ const webFontLoader = await import(
+ /* webpackChunkName: "webfontloader" */ "webfontloader"
+ );
+
+ webFontLoader.load({
+ google: {
+ families: ["Roboto:100,300,400,500,700,900&display=swap"],
+ },
+ });
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 318e397..79f6be9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,18 @@
<template>
- <div class="home">
- <img alt="Vue logo" src="../assets/logo.png" />
- <HelloWorld msg="Welcome to Your Vue.js App" />
- </div>
+ <HelloWorld />
</template>
<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import { defineComponent } from "vue";
-export default {
+// Components
+import HelloWorld from "../components/HelloWorld.vue";
+
+export default defineComponent({
name: "HomeView",
+
components: {
HelloWorld,
},
-};
+});
</script>
diff --git a/vue.config.js b/vue.config.js
index 0aed899..e5c2653 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,10 @@
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
+
+ pluginOptions: {
+ vuetify: {
+ // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
+ },
+ },
});
--
GitLab