Add Vuetify and basic layout for test purposes

This commit is contained in:
2024-09-03 13:54:19 +02:00
parent 36c5e5b583
commit 4ec710e899
7 changed files with 85 additions and 97 deletions

View File

@@ -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>

View File

@@ -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
}
}
}
}
}

View File

@@ -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",

View File

@@ -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>

View File

@@ -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')

View 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