designtopack/src/App.vue

<template>
  <component :is="components[data.template]" v-if="data" :data="data" />
</template>

<script setup>
import { useApiStore } from "./stores/api";
import { useUserStore } from "./stores/user";
import { ref } from "vue";
import home from "./views/Home.vue";
import notifications from "./views/Notifications.vue";
import reunions from "./views/Reunions.vue";
import inspirations from "./views/Inspirations.vue";
import { storeToRefs } from "pinia";

const components = {
  home,
  notifications,
  reunions,
  inspirations
};

const { user } = storeToRefs(useUserStore());
user.value = kirbyData.user;

const data = ref(null);
const api = useApiStore();
api.fetchPageData().then((res) => (data.value = res));
</script>