Vue Router Layout System

AdminLayout.vue

<script setup lang="ts"></script>

<template>
  <h1>admin layout</h1>
  <router-view></router-view>
</template>

router.ts

import { createRouter, createWebHistory } from 'vue-router'
// component
import Home from '../pages/Home.vue'
import AdminLayout from '../components/layouts/AdminLayout.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/',
    component: AdminLayout,
    children: [
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: () => import('../pages/Dashboard.vue'),
        meta: { auth: true },
      },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../pages/Login.vue'),
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})