front/src/App.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import Header from './components/main/Header.vue';
 </script>
 
 <template>
-  
+    <Header />
+    <main>
+        test
+    </main>
 </template>
 
 <style scoped>
-</style>
+
+</style>

front/src/components/main/Header.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <header>
+        <nav class="flex items-center justify-between p-4">
+            <a href="/" class="text-2xl font-bold">Мои финансы</a>
+            <ul class="flex items-center space-x-4">
+                <li><a href="/change-records" class="text-lg">Домашняя страница</a></li>
+                <li><a href="/spending-groups" class="text-lg">Группы расходов</a></li>
+            </ul>
+        </nav>
+    </header>
+</template>
+
+<style scoped>
+
+</style>