Vue 3 dynamic component inside setup template

Question

I have following problem.

<script setup lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import { useDefaultStore } from "@/stores/default";
let { getLayout } = useDefaultStore();
</script>

<template>
  <component :is="getLayout">
    <RouterView />
  </component>
</template>

I use Pinia as the store. I checked getLayout its getting defaultLayout

I know in Vue.js 2 you had to register it:

export default {
   components: {
      defaultLayout
   }
}

How do i do it now?

Answer 1

You can't descructure the store like that, you have to use Pinias storeToRefs() (https://pinia.vuejs.org/core-concepts/#using-the-store). Maybe it has something to do with that, I can't tell without the code of the store.

I'd recommend using this plugin https://github.com/JohnCampionJr/vite-plugin-vue-layouts if you're using Vite and need layouts.