v-text/v-html will override element children forces shutdown

[indykoning]

Vue version

3.5.22

Link to minimal reproduction

https://play.vuejs.org/#eNp9kU9Lw0AQxb/KuJco2Iaip5IW/FNQDyoqeNlLSCfp1s3usjsbCyXf3dmEag/S47z3Zvg9Zi9unJt2EcVcFKHyyhEEpOiW0qjWWU+wB4819FB720LG0UwaaSprAkEbGlgk/zx7QK0tfFqv12fZhTRFPp7jQzwQtk6XhDwBFJsZdBPCHS2k4BNSLO+xLqMm6Eodscg3szGojIssTlq7Rn0IQ85mkR+dFJeCAhPVqplugzVcZp/2pahs65RG/+JIMbEUcxic5JUM/P00aOQjXh70aoPV1z/6NuySJsWrx4C+Qyl+PSp9gzTaq/dnrnZkMn3UnD5hvmGwOibGMXYbzZqxj3ID7ePwEmWaj7DaEZpwKJVAU7If8lLwm+5OVP/DvZpeD3vS9KL/AVsQrcg=

Steps to reproduce

Set your node env to production with some default values applied. e.g.

<span v-text="price">0,00</span>

Try to build and load the page.

What is expected?

Since we're only using Vue for interactivity which loads later we want to use placeholder values. E.g. using Laravel for your SSR you could use this for a product listing:
product.blade.php

<product :product="{{ $product->toJson() }}" v-slot={ price, productOptions, availableOptions }>
    <div>
        price: <span v-text="price">{{ price($product->price) }}</span>
        <label v-for="(option, id) in availableOptions"><input type="radio" v-model="productOptions[id]"> @{{ option.label }} @{{ option.price }}</label>
    </div>
</product>

Allowing a placeholder for the price instead of causing many layout shifts due to vue booting up. And then allowing Vue to take over later to update the price, for when you select different options

What is actually happening?

You are greeted to a white page linking to https://vuejs.org/error-reference/#compiler-56
With no way to tell the compiler to ignore that warning.

System Info

System:
    OS: macOS 26.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 135.45 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.17.1 - ~/.volta/tools/image/node/22.17.1/bin/node
    Yarn: 1.22.22 - ~/.volta/tools/image/yarn/1.22.22/bin/yarn
    npm: 10.9.2 - ~/.volta/tools/image/node/22.17.1/bin/npm
  Browsers:
    Chrome: 142.0.7444.60
    Firefox: 140.0.4
    Safari: 26.0.1
  npmPackages:
    vue: ^3.5 => 3.5.22

Any additional comments?

A possible solution is to allow configuration so disable specific warnings (so long as they are not explicitly breaking for Vue)

[edison1105]

This is by design. But you can implement your own v-txt or v-htm to replace them.
see https://vuejs.org/guide/reusability/custom-directives.html#custom-directives

[indykoning]

For anyone finding this issue later, this is how i have it working right now. Thanks for the suggestion!

app.directive('txt', {
    mounted(el, binding) {
        el.textContent = binding.value == null ? '' : String(binding.value)
    },
    updated(el, binding) {
        if (binding.value !== binding.oldValue) {
            el.textContent = binding.value == null ? '' : String(binding.value)
        }
    },
})

app.directive('htm', {
    mounted(el, binding) {
        el.innerHTML = binding.value == null ? '' : String(binding.value)
    },
    updated(el, binding) {
        if (binding.value !== binding.oldValue) {
            el.innerHTML = binding.value == null ? '' : String(binding.value)
        }
    },
})

This is by design.

Do we have an explanation available why this was added to the design?
My guess would be due to Vue SSR not being able to deal with it, but the current implementation seems a little hostile to other SSR methods as there is no way to prevent your application from crashing in production without building custom directives like above