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.

Answer 2

You need a root element for a component. In your case, maybe you can use 'h4' as the root element since I see you include that anyway in the v-for loop. Once you have done that, you can then create a text node like this.

return createElement(
    'h3',
    {},
    ['Plain text item']
);

According to Vue documentation, the third argument of createElement could be string or array, if it is a string it will be converted to text node.

https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

Answer 3

In Vue 2.5.x, you can use this to render text nodes:

render(createElement) {
    return createElement(() => {
        return document.createTextNode('Text');
    });
}

Answer 4

It's actually very simple to do this without needing to use any private methods.

A VNode which just renders text has all properties undefined, expect for text.

So you can just

return { text: 'my text' };

If you're using TypeScript, you may need to assert it is a VNode.

Answer 5

You can actually get around having to use the _v method mentioned in answers above (and potentially avoid using an internal Vue method that might get renamed later) by changing your implementation of the the MyLink component to be a functional component. Functional components do not require a root element, so it would get around having to put a span around the non-link element.

MyLink could be defined as follows:

const MyLink = {
  functional: true,
  name: 'my-link',
  props: { url: String },
  render(createElement, context) {
    let { url } = context.props
    let slots = context.slots()
    if (url) {
      return createElement(
          'a', {
            attrs: { href: url }
          }, slots.default
      );
    }
    else {
      return slots.default 
    }
  }
};

Then to use it, you could do something like this in a different component:

<div>
  <h4 v-for="item in items">
    <my-link :url="item.url">{{ item.text }}</my-link>
  </h4>
</div>

See: https://codepen.io/hunterae/pen/MZrVEK?editors=1010

Also, as a side-note, it appears your original code snippets are naming the file as Link.vue. Since you are defining your own render function instead of using Vue's templating system, you could theoretically rename the file to Link.js and remove the beginning and closing script tags and just have a completely JS component file. However, if you component includes custom systems (which your snippet did not), this approach will not work. Hope this helps.