Create an instance of a vue 3 component using the composition api

Question

Suppose I create a component in vue3 using the following syntax

// Message.vue
<script setup lang="ts">
const props = defineProps<{
    message: string
}>();
</script>

<template>
<span>{{ props.message }}</span>
</template>

How do I create an instance of this message component?

import Message from "./Message"

let message1 = Message({message:"hello world"}); // how to do this?

This way I can use message1 with like

Answer 1

You can add the following imports to the file.

import { createApp, h } from "vue";

Then create the message component this way.

let message1 = createApp({ 
  setup () {
    return () => h(Message, {message: "hello world"});
  }
});