add layouts

.nvmrc

@@ -0,0 +1 @@
+22.13.0

eslint.config.js

@@ -0,0 +1,13 @@
+import pluginVue from 'eslint-plugin-vue'
+export default [
+  // add more generic rulesets here, such as:
+  // js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // 'vue/no-unused-vars': 'error'
+    }
+  }
+]

package.json

@@ -9,13 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.13"
+    "vue": "3.5.13",
+    "vue-router": "4.5.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "5.2.1",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "0.7.0",
-    "typescript": "~5.6.2",
+    "eslint": "^9.19.0",
-    "vite": "^6.0.5",
+    "eslint-plugin-vue": "^9.32.0",
-    "vue-tsc": "^2.2.0"
+    "typescript": "5.7.3",
+    "vite": "6.0.11",
+    "vue-tsc": "2.2.0"
   }
 }

src/App.vue

@@ -1,10 +1,31 @@
-<script setup lang="ts">
+<script lang="ts">
+  import { computed } from 'vue';
+  import { useRoute } from 'vue-router';
+  import AuthLayout from './layout/AuthLayout.vue';
+  import MainLayout from './layout/MainLayout.vue';
+
+  export default {
+    components: {
+      AuthLayout,
+      MainLayout,
+    },
+    setup() {
+      const route = useRoute();
+      const layout = computed(() => route.meta.layout);
+
+      return {
+        layout,
+      }
+    }
+  }
 </script>
 
 <template>
-  <div>
+  <component
-    <h1>Init</h1>
+    :is="layout + '-layout'"
-  </div>
+    v-if="layout"
+  />
+  <RouterView />
 </template>
 
 <style scoped>

src/components/TheNavbar.vue

@@ -0,0 +1,34 @@
+<template>
+  <nav class="navbar">
+    <h3>Online bank</h3>
+
+    <ul class="navbar-menu">
+      <li>
+        <router-link to="/">
+          Заявки
+        </router-link>
+      </li>
+      <li>
+        <router-link to="/">
+          Помощь
+        </router-link>
+      </li>
+      <li>
+        <a href="#">Сообщения</a>
+      </li>
+      <li>
+        <a href="#">Выход</a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/AuthLayout.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="container">
+    <div class="card" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/MainLayout.vue

@@ -0,0 +1,17 @@
+<template>
+  <the-navbar />
+  <div class="container with-nav">
+    <div class="card" />
+  </div>
+</template>
+
+<script>
+import TheNavbar from '../components/TheNavbar.vue'
+export default {
+  components: { TheNavbar }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/main.ts

@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import './style.css';
 import App from './App.vue'
+import router from './router';
 
-createApp(App).mount('#app')
+createApp(App)
+  .use(router)
+  .mount('#app');

src/router/index.ts

@@ -0,0 +1,36 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+    meta: {
+      layout: 'main'
+    },
+  },
+  {
+    path: '/help',
+    name: 'Help',
+    component: () => import('../views/Help.vue'),
+    meta: {
+      layout: 'main'
+    },
+  },
+  {
+    path: '/auth',
+    name: 'Auth',
+    component: () => import('../views/Auth.vue'),
+    meta: {
+      layout: 'auth'
+    }
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+
+export default router;

src/views/Auth.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Auth</h1>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Help.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    Help
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Home.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <h1>Home</h1>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>