Layout Configure

Here is the layout and routing configure

// DefaultLayout
<template>
    <main class="main-content">
        <div class="position-relative">
            <!-- Header and Breadcrumb -->
            <Header v-if="meta.header !== false" />
            <Breadcrumb v-if="meta.breadcrumb" />
        </div>

        <!-- Router View -->
        <router-view></router-view>
    </main>

    <!-- Footers based on meta -->
    <HealthCareFooter v-if="meta.healthFooter" />
    <QloudAppFooter v-else-if="meta.qloudFooter" />
    <QloudMediaServicesFooter v-else-if="meta.qloudMediaFooter" />
    <QloudSecurityFooter v-else-if="meta.qloudSecurityFooter" />
    <WebHostingFooter v-else-if="meta.webHostingFooter" />
    <Footer v-else-if="meta.footer !== false" />

    <!-- Back To Top Button -->
    <BackToTop />
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

// Import components
import Header from '@/components/partials/header/Header.vue';
import Footer from '@/components/partials/footer/footer.vue';
import BackToTop from '@/components/back-to-top.vue';
import Breadcrumb from '@/components/partials/breadcrumb.vue';
import HealthCareFooter from '@/components/partials/footer/health-care-footer.vue';
import QloudAppFooter from '@/components/partials/footer/qloud-app-footer.vue';
import QloudMediaServicesFooter from '@/components/partials/footer/qloud-media-services-footer.vue';
import QloudSecurityFooter from '@/components/partials/footer/qloud-security-footer.vue';
import WebHostingFooter from '@/components/partials/footer/web-hosting-footer.vue';

// Set up route and meta
const route = useRoute();
const meta = ref(route.meta);

// Watch for route changes and update meta
watch(
    () => route.meta,
    (newMeta) => {
        meta.value = newMeta; // Update meta when the route changes
    }
);
</script>

// BlankLayout
<template>
    <div class="wrapper">
        <router-view></router-view>
    </div>
</template>

<script setup>
</script>