Switch to Quasar

.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
 	root: true,
 	extends: [
 		'plugin:vue/vue3-essential',
-		'eslint:recommended',
+		// 'eslint:recommended',
 		'@vue/eslint-config-typescript',
 		'./.eslintrc-auto-import.json'
 	],
@@ -186,6 +186,7 @@ module.exports = {
 			'error',
 			2
 		],
-		'vue/multi-word-component-names': 'off'
+		'vue/multi-word-component-names': 'off',
+		'vue/require-typed-ref': 'error'
 	}
 };

auto-imports.d.ts

@@ -5,66 +5,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useLink: typeof import('vue-router')['useLink']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-}
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+
 }

components.d.ts

@@ -8,7 +8,11 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('primevue/avatar')['default']
+    Badge: typeof import('primevue/badge')['default']
     Button: typeof import('primevue/button')['default']
+    InputText: typeof import('primevue/inputtext')['default']
+    Menubar: typeof import('primevue/menubar')['default']
+    NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default']
     PButton: typeof import('primevue/button')['default']
     PSidebar: typeof import('primevue/sidebar')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

package.json

@@ -12,14 +12,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@quasar/extras": "^1.16.8",
     "pinia": "^2.1.7",
-    "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primevue": "^3.40.1",
+    "quasar": "^2.13.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@quasar/vite-plugin": "^1.6.0",
     "@rushstack/eslint-patch": "^1.3.3",
     "@stylistic/eslint-plugin": "^1.1.0",
     "@tsconfig/node18": "^18.2.2",
@@ -34,6 +34,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^22.1.0",
     "npm-run-all2": "^6.1.1",
+    "sass": "1.32.12",
     "typescript": "~5.2.0",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",

pnpm-lock.yaml

@@ -5,18 +5,15 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@quasar/extras':
+    specifier: ^1.16.8
+    version: 1.16.8
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
-  primeflex:
-    specifier: ^3.3.1
-    version: 3.3.1
-  primeicons:
-    specifier: ^6.0.1
-    version: 6.0.1
-  primevue:
-    specifier: ^3.40.1
-    version: 3.40.1(vue@3.3.8)
+  quasar:
+    specifier: ^2.13.1
+    version: 2.13.1
   vue:
     specifier: ^3.3.4
     version: 3.3.8(typescript@5.2.2)
@@ -25,6 +22,9 @@ dependencies:
     version: 4.2.5(vue@3.3.8)
 
 devDependencies:
+  '@quasar/vite-plugin':
+    specifier: ^1.6.0
+    version: 1.6.0(@vitejs/plugin-vue@4.4.1)(quasar@2.13.1)(vite@4.5.0)(vue@3.3.8)
   '@rushstack/eslint-patch':
     specifier: ^1.3.3
     version: 1.5.1
@@ -67,6 +67,9 @@ devDependencies:
   npm-run-all2:
     specifier: ^6.1.1
     version: 6.1.1
+  sass:
+    specifier: 1.32.12
+    version: 1.32.12
   typescript:
     specifier: ~5.2.0
     version: 5.2.2
@@ -81,10 +84,10 @@ devDependencies:
     version: 0.7.0(vue-router@4.2.5)(vue@3.3.8)
   vite:
     specifier: ^4.4.11
-    version: 4.5.0(@types/node@18.18.9)
+    version: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
   vitest:
     specifier: ^0.34.6
-    version: 0.34.6(jsdom@22.1.0)
+    version: 0.34.6(jsdom@22.1.0)(sass@1.32.12)
   vue-tsc:
     specifier: ^1.8.19
     version: 1.8.22(typescript@5.2.2)
@@ -707,6 +710,25 @@ packages:
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
     dev: true
 
+  /@quasar/extras@1.16.8:
+    resolution: {integrity: sha512-mNSwQ6wkIVoAemhYdLm9q/FVqLHmVONZgCYdLLeqpakKNsR0r/zHQnCngzdDaXI7veYEvE0uW1gJa1wdQsxXxA==}
+    dev: false
+
+  /@quasar/vite-plugin@1.6.0(@vitejs/plugin-vue@4.4.1)(quasar@2.13.1)(vite@4.5.0)(vue@3.3.8):
+    resolution: {integrity: sha512-LmbV76G1CwWZbrEQhqyZpkRQTJyO3xpW55aXY1zWN+JhyUeG77CcMCEWteBVnJ6I6ehUPFDC9ONd2+WlwH6rNQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@vitejs/plugin-vue': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-beta.0
+      quasar: ^2.8.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-beta.0
+      vue: ^3.0.0
+    dependencies:
+      '@vitejs/plugin-vue': 4.4.1(vite@4.5.0)(vue@3.3.8)
+      quasar: 2.13.1
+      vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
+      vue: 3.3.8(typescript@5.2.2)
+    dev: true
+
   /@rollup/pluginutils@5.0.5:
     resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
     engines: {node: '>=14.0.0'}
@@ -972,7 +994,7 @@ packages:
       '@babel/core': 7.23.3
       '@babel/plugin-transform-typescript': 7.23.3(@babel/core@7.23.3)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.3)
-      vite: 4.5.0(@types/node@18.18.9)
+      vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
       vue: 3.3.8(typescript@5.2.2)
     transitivePeerDependencies:
       - supports-color
@@ -985,7 +1007,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.18.9)
+      vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
       vue: 3.3.8(typescript@5.2.2)
     dev: true
 
@@ -2599,22 +2621,6 @@ packages:
       react-is: 18.2.0
     dev: true
 
-  /primeflex@3.3.1:
-    resolution: {integrity: sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==}
-    dev: false
-
-  /primeicons@6.0.1:
-    resolution: {integrity: sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==}
-    dev: false
-
-  /primevue@3.40.1(vue@3.3.8):
-    resolution: {integrity: sha512-TIFjoSUDiTmlxwQddaWckzcPIpj0F8a6ZMnm0tpAD/ieyUIHnNpbAi5de8LQf8eF0b+x5EkOkdjdngSlD+iPCw==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      vue: 3.3.8(typescript@5.2.2)
-    dev: false
-
   /proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
     dev: true
@@ -2628,6 +2634,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /quasar@2.13.1:
+    resolution: {integrity: sha512-Q8pNpjPOBn1K5IJ19daI3hAxwnXbHv9EyOiJIZFxA6W0KfVdJwcYJkDcmN2BtCdXxc3QmW8WEZ8+jz3/yp8X8g==}
+    engines: {node: '>= 10.18.1', npm: '>= 6.13.4', yarn: '>= 1.21.1'}
+
   /querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
     dev: true
@@ -2709,6 +2719,14 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sass@1.32.12:
+    resolution: {integrity: sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==}
+    engines: {node: '>=8.9.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+    dev: true
+
   /saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -3079,7 +3097,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-node@0.34.6(@types/node@18.18.9):
+  /vite-node@0.34.6(@types/node@18.18.9)(sass@1.32.12):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -3089,7 +3107,7 @@ packages:
       mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.5.0(@types/node@18.18.9)
+      vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -3101,7 +3119,7 @@ packages:
       - terser
     dev: true
 
-  /vite@4.5.0(@types/node@18.18.9):
+  /vite@4.5.0(@types/node@18.18.9)(sass@1.32.12):
     resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -3133,11 +3151,12 @@ packages:
       esbuild: 0.18.20
       postcss: 8.4.31
       rollup: 3.29.4
+      sass: 1.32.12
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@0.34.6(jsdom@22.1.0):
+  /vitest@0.34.6(jsdom@22.1.0)(sass@1.32.12):
     resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -3190,8 +3209,8 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.1
       tinypool: 0.7.0
-      vite: 4.5.0(@types/node@18.18.9)
-      vite-node: 0.34.6(@types/node@18.18.9)
+      vite: 4.5.0(@types/node@18.18.9)(sass@1.32.12)
+      vite-node: 0.34.6(@types/node@18.18.9)(sass@1.32.12)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

src/App.vue

@@ -1,8 +1,28 @@
+<template>
+  <q-layout view="hHh LpR fFf">
+    <NavbarComponent @toggleLeftDrawer="toggleLeftDrawer"/>
+    <SidebarComponent :drawer="leftDrawerOpen"/>
+
+    <q-page-container>
+      <!-- This is where the magic happens -->
+      <RouterView />
+    </q-page-container>
+  </q-layout>
+</template>
+
 <script setup lang="ts">
 import {
-	RouterLink, RouterView
+	ref
+} from 'vue';
+import {
+	RouterView
 } from 'vue-router';
-// import HelloWorld from './components/HelloWorld.vue'
+
+const leftDrawerOpen = ref(false);
+
+const toggleLeftDrawer = () => {
+	leftDrawerOpen.value = !leftDrawerOpen.value;
+};
 
 function test(): string {
 	const asdf = {
@@ -24,21 +44,3 @@ function test(): string {
 
 test();
 </script>
-
-<template>
-  <Button class="font-bold" label="Submit" icon="pi pi-check" />
-  <header>
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <SidebarComponent/>
-
-  <RouterView />
-</template>

src/assets/main.css

@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}

src/assets/quasar-variables.sass

@@ -0,0 +1,10 @@
+$primary: #1976D2
+$secondary: #26A69A
+$accent: #9C27B0
+
+$dark: #1D1D1D
+
+$positive: #21BA45
+$negative: #C10015
+$info: #31CCEC
+$warning: #F2C037

src/components/NavbarComponent.vue

@@ -0,0 +1,22 @@
+<template>
+  <q-header elevated class="bg-primary text-white">
+    <q-toolbar>
+      <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+      <q-toolbar-title>
+        <q-avatar>
+          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
+        </q-avatar>
+        Title
+      </q-toolbar-title>
+    </q-toolbar>
+  </q-header>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits([ 'toggleLeftDrawer' ]);
+
+const toggleLeftDrawer = function() {
+	emit('toggleLeftDrawer');
+};
+</script>

src/components/SidebarComponent.vue

@@ -1,184 +1,74 @@
 <template>
-  <Sidebar v-model:visible="visible">
-    <template #container="{ closeCallback }">
-      <div class="flex flex-column h-full">
-        <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
-          <span class="inline-flex align-items-center gap-2">
-            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="..." fill="var(--primary-color-color)" />
-              <path d="..." fill="var(--text-color)" />
-            </svg>
-            <span class="font-semibold text-2xl text-primary">Your Logo</span>
-          </span>
-          <span>
-            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
-          </span>
-        </div>
-        <div class="overflow-y-auto">
-          <ul class="list-none p-3 m-0">
-            <li>
-              <div
-                v-ripple
-                v-styleclass="{
-                  selector: '@next',
-                  enterClass: 'hidden',
-                  enterActiveClass: 'slidedown',
-                  leaveToClass: 'hidden',
-                  leaveActiveClass: 'slideup'
-                }"
-                class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
-              >
-                <span class="font-medium">FAVORITES</span>
-                <i class="pi pi-chevron-down"></i>
-              </div>
-              <ul class="list-none p-0 m-0 overflow-hidden">
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-home mr-2"></i>
-                    <span class="font-medium">Dashboard</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-bookmark mr-2"></i>
-                    <span class="font-medium">Bookmarks</span>
-                  </a>
-                </li>
-                <li>
-                  <a
-                    v-ripple
-                    v-styleclass="{
-                      selector: '@next',
-                      enterClass: 'hidden',
-                      enterActiveClass: 'slidedown',
-                      leaveToClass: 'hidden',
-                      leaveActiveClass: 'slideup'
-                    }"
-                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
-                  >
-                    <i class="pi pi-chart-line mr-2"></i>
-                    <span class="font-medium">Reports</span>
-                    <i class="pi pi-chevron-down ml-auto"></i>
-                  </a>
-                  <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
-                    <li>
-                      <a
-                        v-ripple
-                        v-styleclass="{
-                          selector: '@next',
-                          enterClass: 'hidden',
-                          enterActiveClass: 'slidedown',
-                          leaveToClass: 'hidden',
-                          leaveActiveClass: 'slideup'
-                        }"
-                        class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
-                      >
-                        <i class="pi pi-chart-line mr-2"></i>
-                        <span class="font-medium">Revenue</span>
-                        <i class="pi pi-chevron-down ml-auto"></i>
-                      </a>
-                      <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
-                        <li>
-                          <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                            <i class="pi pi-table mr-2"></i>
-                            <span class="font-medium">View</span>
-                          </a>
-                        </li>
-                        <li>
-                          <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                            <i class="pi pi-search mr-2"></i>
-                            <span class="font-medium">Search</span>
-                          </a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li>
-                      <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                        <i class="pi pi-chart-line mr-2"></i>
-                        <span class="font-medium">Expenses</span>
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-users mr-2"></i>
-                    <span class="font-medium">Team</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-comments mr-2"></i>
-                    <span class="font-medium">Messages</span>
-                    <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-calendar mr-2"></i>
-                    <span class="font-medium">Calendar</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-cog mr-2"></i>
-                    <span class="font-medium">Settings</span>
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="list-none p-3 m-0">
-            <li>
-              <div
-                v-ripple
-                v-styleclass="{
-                  selector: '@next',
-                  enterClass: 'hidden',
-                  enterActiveClass: 'slidedown',
-                  leaveToClass: 'hidden',
-                  leaveActiveClass: 'slideup'
-                }"
-                class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
-              >
-                <span class="font-medium">APPLICATION</span>
-                <i class="pi pi-chevron-down"></i>
-              </div>
-              <ul class="list-none p-0 m-0 overflow-hidden">
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-folder mr-2"></i>
-                    <span class="font-medium">Projects</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-chart-bar mr-2"></i>
-                    <span class="font-medium">Performance</span>
-                  </a>
-                </li>
-                <li>
-                  <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-                    <i class="pi pi-cog mr-2"></i>
-                    <span class="font-medium">Settings</span>
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-        <div class="mt-auto">
-          <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
-          <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
-            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
-            <span class="font-bold">Amy Elsner</span>
-          </a>
-        </div>
-      </div>
-    </template>
-  </Sidebar>
+  <q-drawer :model-value="props.drawer" side="left" elevated>
+    <q-scroll-area class="fit">
+      <q-list>
+
+        <template v-for="(menuItem, index) in menuList" :key="index">
+          <!-- <router-link :to="{ name: 'home' }"> -->
+          <q-space v-if="menuItem.type === 'spacer'"/>
+          <template v-else>
+            <q-item clickable v-ripple :to="{ name: menuItem.to }">
+              <q-item-section avatar>
+                <q-icon :name="menuItem.icon" />
+              </q-item-section>
+              <q-item-section>
+                {{ menuItem.label }}
+              </q-item-section>
+            </q-item>
+            <!-- </router-link> -->
+            <q-separator :key="'sep' + index"  v-if="menuItem.separator" />
+          </template>
+        </template>
+
+      </q-list>
+    </q-scroll-area>
+  </q-drawer>
 </template>
 
 <script setup lang="ts">
-const visible = ref(true);
+const props = defineProps([ 'drawer' ]);
+
+const menuList = [
+	{
+		icon: 'home',
+		label: 'Home',
+		separator: true,
+		to: 'home'
+	},
+	{
+		icon: 'send',
+		label: 'Outbox',
+		separator: false,
+		to: 'send'
+	},
+	{
+		icon: 'delete',
+		label: 'Trash',
+		separator: false
+	},
+	{
+		icon: 'error',
+		label: 'Spam',
+		separator: true
+	},
+	{
+		type: 'spacer'
+	},
+	{
+		icon: 'settings',
+		label: 'Settings',
+		separator: false
+	},
+	{
+		icon: 'feedback',
+		label: 'Send Feedback',
+		separator: false
+	},
+	{
+		icon: 'help',
+		iconColor: 'primary',
+		label: 'Help',
+		separator: false
+	}
+];
 </script>

src/main.ts

@@ -5,15 +5,28 @@ import {
 	createPinia
 } from 'pinia';
 
-import PrimeVue from 'primevue/config';
-import 'primeflex/primeflex.css';
+import '@/assets/main.css';
+
+import {
+	Quasar
+} from 'quasar';
+
+// Import icon libraries
+import '@quasar/extras/material-icons/material-icons.css';
+
+// Import Quasar css
+import 'quasar/src/css/index.sass';
 
 import App from './App.vue';
 import router from './router';
 
 const app = createApp(App);
 
-app.use(PrimeVue);
+app.use(Quasar, {
+	config: {
+		dark: true
+	}
+});
 app.use(createPinia());
 app.use(router);
 

src/router/index.ts

@@ -1,14 +1,22 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import {
+	createRouter, createWebHistory
+} from 'vue-router';
 // import HomeView from '../views/HomeView.vue'
+import MainPage from '@/views/MainPage.vue';
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
 	routes: [
-		// {
-		//   path: '/',
-		//   name: 'home',
-		//   component: HomeView
-		// },
+		{
+			path: '/',
+			name: 'home',
+			component: MainPage
+		},
+		{
+			path: '/send',
+			name: 'send',
+			component: MainPage
+		}
 		// {
 		//   path: '/about',
 		//   name: 'about',

src/views/MainPage.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>Hello world</span>
+</template>

vite.config.ts

@@ -10,9 +10,13 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 
 import Components from 'unplugin-vue-components/vite';
 import {
-	PrimeVueResolver
+	QuasarResolver
 } from 'unplugin-vue-components/resolvers';
 
+import {
+	quasar, transformAssetUrls
+} from '@quasar/vite-plugin';
+
 import AutoImport from 'unplugin-auto-import/vite';
 import VueRouter from 'unplugin-vue-router/vite';
 
@@ -21,12 +25,7 @@ export default defineConfig({
 	plugins: [
 		VueRouter(),
 		Components({
-			resolvers: [ PrimeVueResolver({
-				importTheme: 'mdc-dark-deeppurple',
-				importIcons: true,
-				importStyle: true
-				// prefix: 'P'
-			}) ]
+			resolvers: [ QuasarResolver() ]
 		}),
 		AutoImport({
 			include: [
@@ -35,11 +34,11 @@ export default defineConfig({
 				/\.vue\?vue/, // .vue
 				/\.md$/ // .md
 			],
-			imports: [
-				// presets
-				'vue',
-				'vue-router'
-			],
+			// imports: [
+			// 	// presets
+			// 	'vue',
+			// 	'vue-router'
+			// ],
 			dirs: [ './src/components/**' ],
 			dts: true,
 			eslintrc: {
@@ -47,8 +46,15 @@ export default defineConfig({
 			}
 		}),
 
-		vue(),
-		vueJsx()
+		vue({
+			template: {
+				transformAssetUrls
+			}
+		}),
+		vueJsx(),
+		quasar({
+			sassVariables: 'src/assets/quasar-variables.sass'
+		})
 	],
 	resolve: {
 		alias: {