Version

3.0.5

Reproduction link

https://github.com/sanjade/vue3-bug

Steps to reproduce

1. git clone https://github.com/sanjade/vue3-bug
2. cd vue3-bug && yarn install
3. yarn dev

What is expected?

So I have,

import { createApp, compile } from "vue"

const app = createApp(App)
app.component("compiled-component", {
    props: {
        code: {
            type: String,
            default: "<p>Text</p>"
        }
    },
    render: compile(props.code) // I want to pass this code from props
})
app.mount("#app")

How can I pass props.code to compile in render function?

I also tried doing something like this,

import { createApp, compile } from "vue"

const app = createApp(App)
app.component("compiled-component", {
    props: {
        code: {
            type: String,
            default: "<p>Text</p>"
        }
    },
    render(ctx) {
        return compile(ctx.code)
    }
})
app.mount("#app")

But it renders function render(_ctx, _cache) { with (_ctx) { const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue return (_openBlock(), _createBlock("p", null, "Text")) } } instead.

What is actually happening?

It renders function render(_ctx, _cache) { with (_ctx) { const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue return (_openBlock(), _createBlock("p", null, "Text")) } } instead of rendering the schema.

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

take a look at the existing tests using compile to understand how it works. This could also help: https://github.com/vuejs/vue-router-next/pull/695/files#diff-826374c042c4ec04802e8cf79968c278a00405a14eab45402f5c772a52386b8a