Invalid vnode type when creating vnode

Get Help
#1

I am trying to use in my AppVue view to switch between different layouts, but when I access the page, the following warning is displayed:

[Vue warn]: Invalid vnode type when creating vnode: . at <AppVue> [runtime-core.esm-bundler.js:38](webpack://test/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?d2dd)

I don’t like warnings in my applications, so I was wondering where to look to fix this? I am using Vue 3 with composition api. I have tried to find the reason for this but now I am hoping to a better explanation on where to look… :slight_smile:
If a code example is needed, please let me know.

#2

Please provide code related to your issue. Without it, it’s hard for us to help. You can refer to our guide on asking for help for more information. Thanks!

#3

Ok, just created a quick test project and I get the same warning there, so this is a plain vue 3 project (“vue”: “^3.2.13”,“vue-router”: “^4.0.3”) using vue client 5.0.0.rc-2
And the AppVue looks like this:

<template>
  <component :is="layout" />
</template>

<script lang="ts">
import { useRoute } from 'vue-router'
import { ref, watch } from "vue";
import MainLayout from "@/components/MainLayout.vue";
import AuthLayout from "@/components/AuthLayout.vue";


export default {
  name: 'AppVue',
  components: {
    AuthLayout,
    MainLayout
  },
  setup() {
    const route = useRoute()

    const layout = ref('');

    watch(route, (to) => {
      // set layout by route meta
      if (to.meta.layout !== undefined) {
        layout.value = to.meta.layout as string
      } else {
        layout.value = "MainLayout" // this is default layout if route meta is not set
      }
      console.log(layout.value)
    })

    return {
      layout,
    }
  }
}
</script>

AuthLayout and MainLayout just contains a div with a text.

#5

btw, just tried a test where I used the options api instead of the compoistion api, then the warning disappeared…
Is this something known with the compoistion api or?