CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-render-function
Muhammad Rehan Saeed
Muhammad Rehan Saeed

Reputation: 38457

Combining class names in Vue Render Function

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.

Upvotes: 1

Views: 1418

Answers (1)

Dan
Dan

Reputation: 63059

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.

Upvotes: 2

Related Questions