Create text node with custom render function in Vue.js

Question

I\'m using a my-link component to wrap an anchor tag on demand around various items. For that purpose a custom render method is used - however the

Answer 1

Vue exposes an internal method on it's prototype called _v that creates a plain text node. You can return the result of calling this method from a render function to render a plain text string:

render(h){
    return this._v("my string value");
}

Exposing it in this way, prefixed with an underscore, likely indicates it's intended as a private API method, so use with care.

If you use a functional component, "this" is also not available. In this case, you should call context._v(), for example:

functional: true,
render(h, context){
    return context._v("my string value")
}

This, combined with extracting the text from the slot (as in your comment, using the helpful getChildrenTextContent) will produce the desired result.