zterton-status/src/App.vue

<template>
  <component :is="layout" class="text-gray-700 dark:text-gray-200">
    <router-view />
  </component>
</template>
<script setup lang="ts">
// <Footer />
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { AppDefsAction } from '~/store/types'
// import AppLayout from '~/layouts/AppLayout.vue'
import { useHead } from '@vueuse/head'
// https://github.com/vueuse/head
// you can use this to manipulate the document head in any components,
// they will be rendered correctly in the html results with vite-ssg

import defs from '../assets/defs.json'

const store = useStore()
useHead({
  title: 'Status',
  meta: [
    { name: 'description', content: 'Opinionated Vite Starter Template' },
  ],
})
const { currentRoute } = useRouter()
const appLayout = 'AppLayout'
const layout = computed(() => {
  return `${currentRoute.value.meta.layout || appLayout}`
})
onBeforeMount(() => {
	if (defs) {
		store.dispatch(AppDefsAction.addDefs, { key: 'ui', defs })
	}
})
</script>