feat: primevue base

web/src/App.vue

@@ -1,11 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import NavComponent from './components/NavComponent.vue'
+</script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+	<nav-component />
+	<main>
+		<router-view />
+	</main>
 </template>
 
 <style scoped></style>

web/src/assets/main.css

@@ -0,0 +1,14 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+
+* {
+	box-sizing: border-box;
+}
+
+body{
+	margin: 0;
+}
+
+.button-position {
+	@apply fixed bottom-0 left-0 m-3;
+}

web/src/components/NavComponent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, Drawer } from 'primevue'
+
+const visible = ref(false)
+</script>
+
+<template>
+	<header>
+		<Drawer v-model:visible="visible">
+			<template #container="{ closeCallback }">
+				<div class="button-position">
+					<Button
+						type="button"
+						@click="closeCallback"
+						icon="pi pi-times"
+						variant="outlined"
+					></Button>
+				</div>
+			</template>
+		</Drawer>
+	</header>
+	<div class="button-position">
+		<Button icon="pi pi-bars" @click="visible = true" />
+	</div>
+</template>
+
+<style scoped></style>

web/src/main.ts

@@ -1,11 +1,23 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
+
 import App from './App.vue'
 import router from './router'
 
+import 'primeicons/primeicons.css'
+import '@/assets/main.css'
+
 const app = createApp(App)
 
+app.use(PrimeVue, {
+	theme: {
+		preset: Aura,
+	},
+})
+
 app.use(createPinia())
 app.use(router)
 

web/src/router/index.ts

@@ -2,7 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
-	routes: [],
+	routes: [
+		{ path: '/', component: () => import('@/views/HomeView.vue')}
+	],
 })
 
 export default router

web/src/views/HomeView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+	<p>Home</p>
+</template>
+
+<style scoped></style>