Combining class names in Vue Render Function

Question

I have a Vue 2 component using the render function like so:

export default {
  name: "u-skeleton",
  render(createElement) {
    return createElement("div", {
      attrs: {
        class: "skeleton"
      },
    });
  },
};

When I use the component like so:

<u-skeleton class="foo"/>

The HTML output is:

<div class="foo"/>

How can I get it to be this, so that the CSS class names are combined?

<div class="foo skeleton"/>

It would be helpful to know the answer in Vue 2 and 3.

Answer 1

When using a render function, class is a special attribute that has its own property in the options object:

render(createElement) {
  return createElement("div", {
    class: 'skeleton'
  });
}

Instead of attrs, use the class property which can be:

a string, object, or array of strings and objects.