FEAT: Adding children layouts #31

src/components/home/DefaultHome.vue

@@ -32,7 +32,6 @@ const templateStore = useTemplateStore();
       <GraphImage />
     </div>
   </div>
-  <DefaultFooter />
 </template>
 
 <style scoped>

src/layouts/BlankLayout.vue

@@ -0,0 +1,5 @@
+<template>
+<main>
+<RouterView/>
+</main>
+</template>

src/layouts/DefaultLayout.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DefaultHeader, DefaultFooter } from '@/components';
+</script>
+
+<template>
+<main>
+<DefaultHeader/>
+<RouterView/>
+<DefaultFooter/>
+</main>
+</template>

src/layouts/GraphLayout.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { DefaultHeader } from '@/components';
+</script>
+
+<template>
+<main>
+<DefaultHeader/>
+<RouterView/>
+</main>
+</template>

src/pages/AboutView.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>About</h1>
 </template>

src/pages/ArticleView.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>Article</h1>
 </template>

src/pages/AuthorView.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>Author</h1>
 </template>

src/pages/FavoriteView.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader, DefaultFooter } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>favorite</h1>
-  <DefaultFooter/>
 </template>

src/pages/GraphView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { GraphContainer, PainelControl, DefaultHeader } from '@/components';
+import { GraphContainer } from '@/components';
 
 import { useAuth, useSetGraph } from '@/composables';
 import { useGraphStore } from '@/stores';
@@ -12,7 +12,6 @@ useAuth();
 
 <template>
   <div>
-    <DefaultHeader/>
       <div class="container">
         <GraphContainer :nodes="currentConnections.nodes" :edges="currentConnections.edges" :configs="configs"/>
       </div>

src/pages/HomeView.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import { DefaultHeader, DefaultHome } from "@/components";
+import { DefaultHome } from "@/components";
 </script>
 <template>
-  <DefaultHeader />
   <DefaultHome />
 </template>
-
-<style scoped></style>

src/pages/ProfileView.vue

@@ -1,12 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <h1>Profile</h1>
-</template>
-
-
-<style scoped>
-
-</style>
+</template>

src/router/index.ts

@@ -5,49 +5,68 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: () => import('../pages/HomeView.vue')
+      component: () => import('../layouts/DefaultLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'home',
+          component: () => import('../pages/HomeView.vue'),
+        },
+        {
+          path: '/about',
+          name: 'about',
+          component: () => import('../pages/AboutView.vue'),
+        },
+        {
+          path: '/article',
+          name: 'article',
+          component: () => import('../pages/ArticleView.vue'),
+        },
+        {
+          path: '/author',
+          name: 'author',
+          component: () => import('../pages/AuthorView.vue'),
+        },
+        {
+          path: '/favorite',
+          name: 'favorite',
+          component: () => import('../pages/FavoriteView.vue'),
+          meta: {
+            requiresAuth: true
+          }
+        },
+        {
+          path: '/profile',
+          name: 'profile',
+          component: () => import('../pages/ProfileView.vue'), 
+          meta: {
+            requiresAuth: true
+          }
+        },
+
+      ],
     },
     {
       path: '/graph',
-      name: 'graph',
-      component: () => import('../pages/GraphView.vue')
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('../pages/AboutView.vue')
-    },
-    {
-      path: '/article',
-      name: 'article',
-      component: () => import('../pages/ArticleView.vue')
-    },
-    {
-      path: '/author',
-      name: 'author',
-      component: () => import('../pages/AuthorView.vue')
-    },
-    {
-      path: '/favorite',
-      name: 'favorite',
-      component: () => import('../pages/FavoriteView.vue'),
-      meta: {
-        requiresAuth: true
-      }
-    },
-    {
-      path: '/profile',
-      name: 'profile',
-      component: () => import('../pages/ProfileView.vue'),
-      meta: {
-        requiresAuth: true
-      }
+      component: () => import('../layouts/GraphLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'graph',
+          component: () => import('../pages/GraphView.vue'),
+        },
+      ]
     },
     {
       path: '/login',
-      name: 'login',
-      component: () => import('../pages/LoginView.vue')
+      component: () => import('../layouts/BlankLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'login',
+          component: () => import('../pages/LoginView.vue'),
+        },
+      ]
     }
   ]
 })