Vue: interpret child content

04 Feb 2021, updated 15 Feb 2022

Testing whether a Vue component can alter the child text content, including nested tags:

Hello, text →
<to-uppercase>foobar <b>bar</b></to-uppercase>
← 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. Let's try syntax highlighting:


var cube_direction_vectors = [
    Cube(+1, 0, -1), Cube(+1, -1, 0), Cube(0, -1, +1), 
    Cube(-1, 0, +1), Cube(-1, +1, 0), Cube(0, +1, -1), 
]

function cube_direction(direction):
    return cube_direction_vectors[direction]

function cube_add(hex, vec):
    return Cube(hex.q + vec.q, hex.r + vec.r, hex.s + vec.s)

function cube_neighbor(cube, direction):
    return cube_add(cube, cube_direction(direction))

To make it work for children, I used the cloneVnode function from LinusBorg's fiddle^[1]. There are probably subtleties I'm missing. It seems to work with event handlers:


var cube_direction_vectors = [
    ]

Currently highlighting element {{highlighted}} {{highlighted === -1 ? '; try mousing over a Cube call above' : '' }}

Code: vue-children.js

Endnotes