设置模板内的 Vue 3 动态组件

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.

Answer 2

Use defineAsyncComponent

defineAsyncComponent(() => import("@/layouts/default.vue"))

or register the component globally in your main.js :

app.component('defaultLayout', defaultLayout)