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 createElement method can only create HTML nodes, creating plain text nodes does not seem to be possible.

Current scenario

Usage of `my-link` component

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

Implementation of `my-link` component as `Link.vue`

<script>
export default {
  name: 'my-link',
  props: { url: String },
  render(createElement) {
    if (this.url) {
      return createElement(
          'a', {
            attrs: { href: this.url }
          }, this.$slots.default
      );
    }

    return createElement(
        'span',
        this.$slots.default
    );
  }
};
</script>

Resulting HTML

<h4>
  <a url="/some-link">This item is linked</a>
</h4>
<h4>
  <span>Plain text item</span>
</h4>

Desired scenario

The span tag in this particular scenario is superfluous and could be avoided - however, it's not clear to me, how and whether at all this is possible with Vue.js. In general, I'd like to know how to create plain text nodes using a custom render method.

<h4>
  <a url="/some-link">This item is linked</a>
</h4>
<h4>
  Plain text item
</h4>

Side-notes:

question was originally raised for VueJS v2.1 & v2.2-beta (February 2017)
focus was on proper semantic nodes (text node vs. element node)

Hey just did some research, ultimately createElement will call document.createElement. So although there may be other ways to do what you are needing, you should always have a tag name as sending null will have random affects developer.mozilla.org/en-US/docs/Web/API/Document/createElement hope that helps — Austio
– Austio, Commented Feb 23, 2017 at 13:11
Not sure about the advisability of using it, but Vue exposes a _v method which is an alias for createTextVNode. You can write return this._v("some text") from a render function. Your second issue would be determining if the default slot contained only a text node and extracting the text from it. codepen.io/Kradek/pen/xqxgza?editors=1010 — Bert
– Bert, Commented Feb 23, 2017 at 17:00
@Austio Thanks for the research on that, I'm pretty sure as well this might have side-effects for different browser vendors. createElement(null) created an empty VNode, but I could not find a way to properly wrap that in that scope. — Oliver Hader
– Oliver Hader, Commented Feb 23, 2017 at 20:01
@BertEvans Perfect! this._v(getChildrenTextContent(this.$slots.default)) works like a charm, using an text extraction method similar to vuejs.org/v2/guide/render-function#Complete-Example. Please consider adding this as an answer here, with the remark of _v() probably being part of the internal API. Thanks! — Oliver Hader
– Oliver Hader, Commented Feb 23, 2017 at 20:20

tony19 · Accepted Answer · 2022-07-15 19:56:09Z

24

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.

edited Jul 15, 2022 at 19:56

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 23, 2017 at 22:07

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bert Over a year ago

@AlainDuchesneau It works in 2.5. codepen.io/Kradek/pen/xYJNPY?editors=1010

bernie Over a year ago

_v() is a one-liner: return new VNode(undefined, undefined, undefined, String(val))

Andrew H · Accepted Answer · 2019-01-02 16:56:12Z

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.

the use of functional component is definitely the way to go.

b0nyb0y · Accepted Answer · 2021-09-05 19:49:51Z

2

In case someone comes across this question and is currently using Vue 3: the API has changed. You currently have 2 options:

install @vue/compat to access _v() as in Vue 2
otherwise, opt for createTextVNode() instead:

import { createTextVNode, VNode } from 'vue';

export const renderMoney = (data: number): VNode =>
  createTextVNode(data.toLocaleString('en'));

In this example (Typescript), you can pass in a number and get a plain text VNode back.

answered Sep 5, 2021 at 19:49

b0nyb0y

1,4461 gold badge15 silver badges14 bronze badges

Comments

Alexandr · Accepted Answer · 2022-10-06 14:28:17Z

1

Found a few workarounds if the answer above doesn't work
You can create the VNode object and set the text:

render(createElement) {
  const vNode = createElement();
  vNode.text = 'some text';
  vNode.isComment = false;
  return vNode;
}

Or return the first child, which is not ideal:

render(createElement) {
  return createElement('p', 'some text').children[0];
}

answered Oct 6, 2022 at 14:28

Alexandr

1,0419 silver badges16 bronze badges

Comments

Fabio Lolli · Accepted Answer · 2020-11-19 17:32:27Z

0

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.

answered Nov 19, 2020 at 17:32

Fabio Lolli

8897 silver badges23 bronze badges

Comments

shtse8 · Accepted Answer · 2022-07-02 16:12:27Z

0

Vue3 provides two symbols Fragment and Text.

import { Fragment, Text } from '@vue/runtime-core'

h(Fragment, [
  h(Text, 'text1'),
  h(Text, 'text2')
])

answered Jul 2, 2022 at 16:12

shtse8

1,40316 silver badges26 bronze badges

Comments

Alain Duchesneau · Accepted Answer · 2018-02-23 18:43:17Z

-4

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

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

answered Feb 23, 2018 at 18:43

Alain Duchesneau

3941 gold badge4 silver badges12 bronze badges

1 Comment

Bert Over a year ago

This definitely doesn't work. The render function should return a vNode.

tony19 · Accepted Answer · 2022-07-15 05:05:08Z

-4

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://v2.vuejs.org/v2/guide/render-function.html#createElement-Arguments

edited Jul 15, 2022 at 5:05

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 9, 2017 at 4:22

Henry Liu

6901 gold badge11 silver badges19 bronze badges

2 Comments

Oliver Hader Over a year ago

That was exactly the question how to avoid that - the original example already shows that by using a span tag (which is quite similar to your h4 suggestion).

Jan Franciszek Cieślak Over a year ago

This fails to answer the question, also there is a way to achieve it with functional components.

Collectives™ on Stack Overflow

Create text node with custom render function in Vue.js

Current scenario

Usage of `my-link` component

Implementation of `my-link` component as `Link.vue`

Resulting HTML

Desired scenario

8 Answers 8

2 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Current scenario

Usage of my-link component

Implementation of my-link component as Link.vue

Resulting HTML

Desired scenario

8 Answers 8

2 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Usage of `my-link` component

Implementation of `my-link` component as `Link.vue`