diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
new file mode 100644
index 0000000..dcf85eb
--- /dev/null
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,72 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d4a8acf..cc788ff 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,7 +6,8 @@ module.exports = {
 	extends: [
 		'plugin:vue/vue3-essential',
 		'eslint:recommended',
-		'@vue/eslint-config-typescript'
+		'@vue/eslint-config-typescript',
+		'./.eslintrc-auto-import.json'
 	],
 	plugins: [ '@stylistic' ],
 	parserOptions: {
@@ -184,6 +185,7 @@ module.exports = {
 		'vue/html-indent': [
 			'error',
 			2
-		]
+		],
+		'vue/multi-word-component-names': 'off'
 	}
 };
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 1d89ee8..108a983 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,5 +5,66 @@
 // 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'
 }
diff --git a/components.d.ts b/components.d.ts
index bbf3d23..cccd667 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,17 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    Avatar: typeof import('primevue/avatar')['default']
     Button: typeof import('primevue/button')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     PButton: typeof import('primevue/button')['default']
+    PSidebar: typeof import('primevue/sidebar')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
+    Sidebar: typeof import('primevue/sidebar')['default']
+    SidebarComponent: typeof import('./src/components/SidebarComponent.vue')['default']
   }
 }
diff --git a/package.json b/package.json
index 84eee15..99a472a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "pinia": "^2.1.7",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.40.1",
     "vue": "^3.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5f4c0f..94d9801 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   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
@@ -2596,6 +2599,10 @@ 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
diff --git a/src/App.vue b/src/App.vue
index 2fb37b9..8720caa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,21 +10,23 @@ function test(): string {
 		hallo: 5,
 		'test-4': 'hallo'
 	};
-	if (true) {
-		asdf.hello = 4;
+	if (asdf.hello === 4) {
+		asdf.hello = 5;
 	}
 	else {
-		asdf.hallo = 5;
+		asdf.hallo = 4;
 	}
 
 	console.log(asdf);
 
 	return asdf['test-4'];
 }
+
+test();
 </script>
 
 <template>
-  <PButton class="font-bold" label="Submit" icon="pi pi-check" />
+  <Button class="font-bold" label="Submit" icon="pi pi-check" />
   <header>
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
@@ -36,5 +38,7 @@ function test(): string {
     </div>
   </header>
 
+  <SidebarComponent/>
+
   <RouterView />
 </template>
diff --git a/src/components/SidebarComponent.vue b/src/components/SidebarComponent.vue
new file mode 100644
index 0000000..2d129db
--- /dev/null
+++ b/src/components/SidebarComponent.vue
@@ -0,0 +1,184 @@
+<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>
+</template>
+
+<script setup lang="ts">
+const visible = ref(true);
+</script>
diff --git a/src/main.ts b/src/main.ts
index d81077b..e538cc0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,12 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
+import {
+	createApp
+} from 'vue';
+import {
+	createPinia
+} from 'pinia';
 
 import PrimeVue from 'primevue/config';
+import 'primeflex/primeflex.css';
 
 import App from './App.vue';
 import router from './router';
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3e5b621..836379c 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,12 +1,22 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
+	"include": [
+		"env.d.ts",
+		"auto-imports.d.ts",
+		"components.d.ts",
+		"src/**/*",
+		"src/**/*.vue"
+	],
+	"exclude": [
+		"src/**/__tests__/*"
+	],
+	"compilerOptions": {
+		"composite": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
+	}
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 100cf6a..9af0876 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,14 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.vitest.json"
-    }
-  ]
-}
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		},
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "./tsconfig.vitest.json"
+		}
+	]
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
index dee96be..7994402 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,16 +1,18 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}
+	"extends": "@tsconfig/node18/tsconfig.json",
+	"include": [
+		"vite.config.*",
+		"vitest.config.*",
+		"cypress.config.*",
+		"nightwatch.conf.*",
+		"playwright.config.*"
+	],
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"types": [
+			"node"
+		]
+	}
+}
\ No newline at end of file
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
index d080d61..aeb9aa4 100644
--- a/tsconfig.vitest.json
+++ b/tsconfig.vitest.json
@@ -1,9 +1,12 @@
 {
-  "extends": "./tsconfig.app.json",
-  "exclude": [],
-  "compilerOptions": {
-    "composite": true,
-    "lib": [],
-    "types": ["node", "jsdom"]
-  }
-}
+	"extends": "./tsconfig.app.json",
+	"exclude": [],
+	"compilerOptions": {
+		"composite": true,
+		"lib": [],
+		"types": [
+			"node",
+			"jsdom"
+		]
+	}
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c910712..8ebcb00 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,37 +1,58 @@
-import { fileURLToPath, URL } from 'node:url'
+import {
+	fileURLToPath, URL
+} from 'node:url';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import {
+	defineConfig
+} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 
-import Components from 'unplugin-vue-components/vite'
-import { PrimeVueResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite';
+import {
+	PrimeVueResolver
+} from 'unplugin-vue-components/resolvers';
 
-import AutoImport from 'unplugin-auto-import/vite'
-import VueRouter from 'unplugin-vue-router/vite'
+import AutoImport from 'unplugin-auto-import/vite';
+import VueRouter from 'unplugin-vue-router/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-	VueRouter(),
-	Components({
-		resolvers: [
-			PrimeVueResolver({
+	plugins: [
+		VueRouter(),
+		Components({
+			resolvers: [ PrimeVueResolver({
 				importTheme: 'mdc-dark-deeppurple',
 				importIcons: true,
-				importStyle: true,
-				prefix: 'P'
-			})
-		]
-	}),
-	AutoImport(),
+				importStyle: true
+				// prefix: 'P'
+			}) ]
+		}),
+		AutoImport({
+			include: [
+				/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+				/\.vue$/,
+				/\.vue\?vue/, // .vue
+				/\.md$/ // .md
+			],
+			imports: [
+				// presets
+				'vue',
+				'vue-router'
+			],
+			dirs: [ './src/components/**' ],
+			dts: true,
+			eslintrc: {
+				enabled: true
+			}
+		}),
 
-    vue(),
-    vueJsx(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+		vue(),
+		vueJsx()
+	],
+	resolve: {
+		alias: {
+			'@': fileURLToPath(new URL('./src', import.meta.url))
+		}
+	}
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 10067d5..6c3d822 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,14 +1,19 @@
-import { fileURLToPath } from 'node:url'
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
-import viteConfig from './vite.config'
+import {
+	fileURLToPath
+} from 'node:url';
+import {
+	mergeConfig, defineConfig, configDefaults
+} from 'vitest/config';
+import viteConfig from './vite.config';
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/*'],
-      root: fileURLToPath(new URL('./', import.meta.url))
-    }
-  })
-)
+export default mergeConfig(viteConfig,
+	defineConfig({
+		test: {
+			environment: 'jsdom',
+			exclude: [
+				...configDefaults.exclude,
+				'e2e/*'
+			],
+			root: fileURLToPath(new URL('./', import.meta.url))
+		}
+	}));