Vue Router Layouts

import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false, speed: 500, minimum: 0.2 })

import DefaultLayout from '@/layouts/DefaultLayout.vue'
import AuthLayout from '@/layouts/AuthLayout.vue'

import HomeView from '@/views/HomeView.vue'
import NewsView from '@/views/NewsView.vue'
import YoutubeView from '@/views/Youtubeiew.vue'
import LoginView from '@/views/LoginView.vue'
import RegisterView from '@/views/RegisterView.vue'
import ForgetPasswordView from '@/views/ForgetPasswordView.vue'
import ProfileView from '@/views/User/ProfileView.vue'
import SettingsView from '@/views/User/SettingsView.vue'
import DashboardView from '@/views/User/DashboardView.vue'

import PublicRoutes from './PublicRoutes'
import MainRoutes from './MainRoutes'

import { useAuthStore } from '@/stores/auth'

const routes = [
  {
    path: '/',
    component: DefaultLayout,
    children: [
      { path: '', name: 'home', component: HomeView },
      { path: 'news', name: 'news', component: NewsView },
      { path: 'youtube', name: 'youtube', component: YoutubeView },
      {
        path: 'about',
        name: 'about',
        component: () => import('@/views/AboutView.vue')
      },
      {
        path: 'profile',
        name: 'profile',
        component: ProfileView,
        meta: { requiresAuth: true }
      },
      {
        path: 'settings',
        name: 'settings',
        component: SettingsView,
        meta: { requiresAuth: true }
      },
      {
        path: 'dashboard',
        name: 'dashboard',
        component: DashboardView,
        meta: { requiresAuth: true }
      }
    ]
  },
  {
    path: '/',
    component: AuthLayout,
    children: [
      { path: 'login', name: 'login', component: LoginView },
      { path: 'register', name: 'register', component: RegisterView },
      { path: 'forget-password', name: 'forget-password', component: ForgetPasswordView }
    ]
  },
  PublicRoutes,
  MainRoutes
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  NProgress.start()
  if (to.meta.requiresAuth && !authStore.token) {
    next('/login')
  } else {
    next()
  }
})

router.afterEach(() => {
  NProgress.done()
})

export default router

<template>
  <div>
    <Navbar />
    <main>
      <router-view />
    </main>
    <Footer />
  </div>
</template>

<template>
  <v-app>
    <DefaultHeader />
    
    <v-main>
      <router-view /> <!-- This is essential to render the child page content -->
    </v-main>

    <DefaultFooter />
  </v-app>
</template>

<script setup>
// Import your header and footer components here
import DefaultHeader from '@/components/DefaultHeader.vue'
import DefaultFooter from '@/components/DefaultFooter.vue'
</script>

{
  path: '/',
  name: 'Frontsite',
  component: DefaultVuetify,
  children: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    }
  ]
}