Début avec des transitions qui marchent

src/router/index.ts

@@ -1,21 +1,49 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+
+import IndexView from '../views/IndexView.vue'
+import HomeView from '../views/Index/HomeView.vue'
+import AboutView from '../views/Index/AboutView.vue'
+
+import DiscordView from '../views/DiscordView.vue'
+import DashboardView from '../views/Discord/DashboardView.vue'
+import ConfigView from '../views/Discord/ConfigView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'index',
+      component: IndexView,
+      children: [
+        {
+          path: '',
+          name: 'home',
+          component: HomeView
+        },
+        {
+          path: '/about',
+          name: 'about',
+          component: AboutView
+        }
+      ]
     },
     {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
+      path: '/discord',
+      name: 'discord',
+      component: DiscordView,
+      children: [
+        {
+          path: '',
+          name: 'dashboard',
+          component: DashboardView
+        },
+        {
+          path: '/config',
+          name: 'config',
+          component: ConfigView
+        }
+      ]
     }
   ]
 })