Vue: intepret child content

from Red Blob Games
04 Feb 2021

Testing whether a Vue component can alter the child text content:

Hello, text →
<Highlight>foobar <b>bar</b></Highlight>
← is altered to be uppercase.

Hello, text →foobar bar← is altered to be uppercase.

This could be useful for localization tags or for markdown or other markup inside text.

To make it work for children, I used the cloneVnode function from LinusBorg's fiddle[1]. There are probably subtleties I'm missing. Does it handle event handlers? Directives? I didn't test.

Email me , or tweet @redblobgames, or comment: