1 files changed, 39 insertions, 40 deletions
diff --git a/front-end/src/bootstrap/Environment.vue b/front-end/src/bootstrap/Environment.vue
index 618ee62..c14b7b6 100644
--- a/front-end/src/bootstrap/Environment.vue
+++ b/front-end/src/bootstrap/Environment.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+
+import { computed, defineAsyncComponent } from 'vue'
+import { RouteLocation, useRouter } from 'vue-router'
+import { filter, map, without, find, includes } from 'lodash-es'
+import { storeToRefs } from 'pinia'
+import { useEnvSize } from '@vnuge/vnlib.browser'
+import { useStore } from '../store'
+import siteHeader from './components/Header.vue'
+import siteFooter from './components/Footer.vue'
+const ConfirmPrompt = defineAsyncComponent(() => import('./components/ConfirmPrompt.vue'));
+const CookieWarning = defineAsyncComponent(() => import('./components/CookieWarning.vue'));
+const PasswordPrompt = defineAsyncComponent(() => import('./components/PasswordPrompt.vue'));
+
+const emit = defineEmits(['logout'])
+const store = useStore()
+const { showCookieWarning, currentRoutes } = storeToRefs(store)
+const { getRoutes } = useRouter();
+
+//Use the env size to calculate the header and footer heights for us
+const { header, footer, content, headerHeight, footerHeight } = useEnvSize(true)
+
+const routes = computed<RouteLocation[]>(() => {
+  // Get routes that are defined above but only if they are defined in the router
+  // This is a computed property because loggedin is a reactive property
+
+  const routes = filter(getRoutes(), (pageName) => includes(currentRoutes.value, pageName.name))
+
+  const activeRoutes = map(currentRoutes.value, route => find(routes, { name: route }))
+
+  return without<RouteLocation>(activeRoutes, undefined)
+})
+
+//Forces the page content to be exactly the height of the viewport - header and footer sizes
+const bodyStyle = computed(() => ({ 'min-height': `calc(100vh - ${headerHeight.value + footerHeight.value}px)` }))
+const generalToastStyle = computed(() => ({ top: `${headerHeight.value + 5}px` }))
+const formToastStyle = computed(() => ({ top: `${headerHeight.value}px` }))
+
+</script>
 <template>
   <div id="env-entry" ref="content" class="absolute top-0 left-0 w-full min-h-screen env-bg">
     <div class="absolute flex w-full">
@@ -44,43 +83,3 @@
     <ConfirmPrompt />
   </div>
 </template>
-
-<script setup lang="ts">
-
-import { computed } from 'vue'
-import { RouteLocation, useRouter } from 'vue-router'
-import { filter, map, without, find, includes } from 'lodash-es'
-import { storeToRefs } from 'pinia'
-import { useEnvSize } from '@vnuge/vnlib.browser'
-import { useStore } from '../store'
-import CookieWarning from './components/CookieWarning.vue'
-import PasswordPrompt from './components/PasswordPrompt.vue'
-import siteHeader from './components/Header.vue'
-import siteFooter from './components/Footer.vue'
-import ConfirmPrompt from './components/ConfirmPrompt.vue'
-
-const emit = defineEmits(['logout'])
-const store = useStore()
-const { showCookieWarning, currentRoutes } = storeToRefs(store)
-const { getRoutes } = useRouter();
-
-//Use the env size to calculate the header and footer heights for us
-const { header, footer, content, headerHeight, footerHeight } = useEnvSize(true)
-
-const routes = computed<RouteLocation[]>(() => {
-  // Get routes that are defined above but only if they are defined in the router
-  // This is a computed property because loggedin is a reactive property
-
-  const routes = filter(getRoutes(), (pageName) => includes(currentRoutes.value, pageName.name))
-
-  const activeRoutes = map(currentRoutes.value, route => find(routes, { name: route }))
-
-  return without<RouteLocation>(activeRoutes, undefined)
-})
-
-//Forces the page content to be exactly the height of the viewport - header and footer sizes
-const bodyStyle = computed(() => ({ 'min-height': `calc(100vh - ${headerHeight.value + footerHeight.value}px)` }))
-const generalToastStyle = computed(() => ({ top: `${headerHeight.value + 5}px` }))
-const formToastStyle = computed(() => ({ top: `${headerHeight.value}px` }))
-
-</script>