Add Vuetify and basic layout for test purposes
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>HackMyCart</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
40
software/package-lock.json
generated
40
software/package-lock.json
generated
@@ -8,9 +8,11 @@
|
||||
"name": "software",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@types/node": "^22.5.2",
|
||||
"typescript": "^5.5.4",
|
||||
"vue": "^3.4.29"
|
||||
"vue": "^3.4.29",
|
||||
"vuetify": "^3.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
@@ -461,6 +463,12 @@
|
||||
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@mdi/font": {
|
||||
"version": "7.4.47",
|
||||
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
|
||||
"integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
|
||||
@@ -1107,6 +1115,36 @@
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vuetify": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.1.tgz",
|
||||
"integrity": "sha512-N1XlczbgeGt/O+JUk72QPrqcDaRIXUdptUciJqGyTvZ9cfMoSlEWs6TZO+dOOfXbKvmIMFMycYg4dgSHDpCPhg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^12.20 || >=14.13"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/johnleider"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=4.7",
|
||||
"vite-plugin-vuetify": ">=1.0.0",
|
||||
"vue": "^3.3.0",
|
||||
"webpack-plugin-vuetify": ">=2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
},
|
||||
"vite-plugin-vuetify": {
|
||||
"optional": true
|
||||
},
|
||||
"webpack-plugin-vuetify": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@types/node": "^22.5.2",
|
||||
"typescript": "^5.5.4",
|
||||
"vue": "^3.4.29"
|
||||
"vue": "^3.4.29",
|
||||
"vuetify": "^3.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const showDrawer = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
HackMyCart
|
||||
<v-app>
|
||||
<v-app-bar>
|
||||
<v-app-bar-nav-icon @click="showDrawer = !showDrawer"/>
|
||||
|
||||
<v-app-bar-title>HackMyCart</v-app-bar-title>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer v-model="showDrawer">
|
||||
<!-- todo -->
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main>
|
||||
<!-- todo -->
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import vuetify from './plugins/vuetify'
|
||||
|
||||
createApp(App)
|
||||
.use(vuetify)
|
||||
.mount('#app')
|
||||
|
||||
17
software/src/plugins/vuetify.ts
Normal file
17
software/src/plugins/vuetify.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// Vuetify & Material icons imports
|
||||
import 'vuetify/styles'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import { createVuetify } from 'vuetify/lib/framework.mjs'
|
||||
import * as components from 'vuetify/components'
|
||||
import * as directives from 'vuetify/directives'
|
||||
|
||||
// Vuetify config
|
||||
const vuetify = createVuetify({
|
||||
components,
|
||||
directives,
|
||||
theme: {
|
||||
defaultTheme: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
export default vuetify
|
||||
Reference in New Issue
Block a user