<template>
    <component :is="currentLayout">
      <slot />
    </component>
  </template>
  
  <script lang="ts" setup>
  import { watch, shallowRef } from 'vue';
  import { useRoute } from 'vue-router';
  
  type CurrentLayoutType = {
    [key in string]: string
  }

  const route = useRoute();
  const currentLayout = shallowRef<CurrentLayoutType|null>(null);

  watch(route, async(newVal)=>{
    if (typeof newVal?.meta?.isFullpage == 'undefined' || newVal?.meta?.isFullpage == false) {
      const layout = await import('@/components/BasicLayout.vue');
      currentLayout.value = layout.default;
    } else {
      currentLayout.value = { template: '<slot />' };
    }
  })
  </script>