feat: page MangaDetails en vue.js

assets/vue/app/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import Layout from '../shared/components/layout/Layout.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
 
 // Placeholder component for new routes
@@ -18,110 +19,118 @@ const PlaceholderComponent = {
 };
 
 const routes = [
-    {
-        path: '/',
+  {
+    path: '/',
+    component: Layout,
+    children: [
+      {
+        path: '',
         name: 'home',
         component: HomePage
-    },
-    {
-        path: '/manga/:slug',
-        name: 'manga-detail',
-        component: PlaceholderComponent,
-        props: { title: 'Détails du manga' }
-    },
-    {
+      },
+      {
+        path: '/manga/:id',
+        name: 'manga-details',
+        component: () => import('../domain/manga/presentation/pages/MangaDetails.vue')
+      },
+      {
         path: '/add',
         name: 'add-manga',
         component: PlaceholderComponent,
         props: { title: 'Ajouter un manga' }
-    },
-    {
+      },
+      {
         path: '/reader/:chapterId',
         name: 'reader',
         component: PlaceholderComponent,
         props: { title: 'Lecteur' }
-    },
-    // Pages placeholder avec chargement différé
-    {
+      },
+      // Pages placeholder avec chargement différé
+      {
         path: '/import',
         name: 'import',
         component: PlaceholderComponent,
         props: { title: 'Import de bibliothèque' }
-    },
-    {
+      },
+      {
         path: '/discover',
         name: 'discover',
         component: PlaceholderComponent,
         props: { title: 'Découvrir' }
-    },
-    {
+      },
+      {
         path: '/convert',
         name: 'convert',
         component: PlaceholderComponent,
         props: { title: 'Convertir CBR en CBZ' }
-    },
-    {
+      },
+      {
         path: '/calendar',
         name: 'calendar',
         component: PlaceholderComponent,
         props: { title: 'Calendrier' }
-    },
-    {
+      },
+      {
         path: '/activity',
         name: 'activity',
         component: PlaceholderComponent,
         props: { title: 'Activité' }
-    },
-    // Paramètres
-    {
+      },
+      // Paramètres
+      {
         path: '/settings/general',
         name: 'settings-general',
         component: PlaceholderComponent,
         props: { title: 'Paramètres généraux' }
-    },
-    {
+      },
+      {
         path: '/settings/folders',
         name: 'settings-folders',
         component: PlaceholderComponent,
         props: { title: 'Gestion des dossiers' }
-    },
-    {
+      },
+      {
         path: '/settings/scrappers',
         name: 'settings-scrappers',
         component: PlaceholderComponent,
         props: { title: 'Configuration des scrappers' }
-    },
-    {
+      },
+      {
         path: '/settings/ui',
         name: 'settings-ui',
         component: PlaceholderComponent,
         props: { title: "Paramètres de l'interface" }
-    },
-    // Système
-    {
+      },
+      // Système
+      {
         path: '/system/status',
         name: 'system-status',
         component: PlaceholderComponent,
         props: { title: 'Status du système' }
-    },
-    {
+      },
+      {
         path: '/system/backup',
         name: 'system-backup',
         component: PlaceholderComponent,
         props: { title: 'Sauvegarde' }
-    },
-    {
+      },
+      {
         path: '/system/logs',
         name: 'system-logs',
         component: PlaceholderComponent,
         props: { title: 'Journaux système' }
-    },
-    {
+      },
+      {
         path: '/system/updates',
         name: 'system-updates',
         component: PlaceholderComponent,
         props: { title: 'Mises à jour' }
-    }
+      }
+    ]
+  }
 ];
 
-export default routes; 
+export const router = createRouter({
+  history: createWebHistory('/vue/'),
+  routes
+});