ChickenFarm/UI/VB.VUE/src/layouts/main/Index.vue

<script setup lang="ts">
import { useRoute } from "vue-router"
import { reinitializeComponents } from "@@/vb-dom"
import { headerDisplayToolbar } from "@@/config/theme"
import LayoutService from "@@/services/LayoutService"
import Header from "@/layouts/main/header/Header.vue"
import Sidebar from "@/layouts/main/sidebar/Sidebar.vue"
import Toolbar from "@/layouts/main/toolbar/Toolbar.vue"
import Content from "@/layouts/main/content/Content.vue"
import Footer from "@/layouts/main/footer/Footer.vue"
import Extras from "@/layouts/main/extras/Extras.vue"

const route = useRoute()

onBeforeMount(() => {
	LayoutService.init()
})

onMounted(() => {
	nextTick(() => {
		reinitializeComponents()
	})
})
onMounted(() => {
	let protocol = window.location.protocol === "https:" ? "wss://" : "ws://"
	initWebSocket(
		protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket"
	)
})

onMounted(() => {
	initSSE(import.meta.env.VITE_APP_BASE_API + "/resource/sse")
})

watch(
	() => route.path,
	() => {
		nextTick(() => {
			reinitializeComponents()
		})
	}
)
</script>
<template>
	<div class="d-flex flex-column flex-root app-root" id="vb_app_root">
		<div class="app-page flex-column flex-column-fluid" id="vb_app_page">
			<Header />
			<div class="app-wrapper flex-column flex-row-fluid" id="vb_app_wrapper">
				<Sidebar />
				<div class="app-main flex-column flex-row-fluid" id="vb_app_main">
					<div class="d-flex flex-column flex-column-fluid">
						<Toolbar v-if="!headerDisplayToolbar" />
						<div id="vb_app_content" class="app-content flex-column-fluid">
							<Content></Content>
						</div>
					</div>
					<Footer />
				</div>
			</div>
		</div>
	</div>
	<Extras />
</template>