codamit.dev

A programmatic rendering case in Vue.js

August 30, 2020

I recently started working on a Vue.js components library and I ran into the following rendering problem.

I wanted a generic button component that dynamically renders the right inner HTML element which is <a> if there is a href props and a <button> otherwise.

<!-- ./Button.vue -->
<template>
  <a
    v-if="href"
    :href="href"
    :disabled="disabled"
    :class="classes"
    @click="onClick"
  >
    <slot />
  </a>
  <button
    v-else
    :type="type"
    :disabled="disabled"
    :class="classes"
    @click="onClick"
  >
    <slot />
  </button>
</template>

<script>
  {
    props: {
      href: String,
      type: String,
      outlined: Boolean,
      disabled: Boolean,
    },
    computed: { ... },
    methods: { ... },
  }
</script>

I firstly come with this template-based solution using both <a> and <button> conditionally displayed using a v-if in the template.

It works, but it doesn’t feel perfect since we need to repeat ourself. Let’s improve the previous code by using a render function :

<!-- ./Button.vue -->
<script>
  {
    props: {
      href: String,
      type: String,
      outlined: Boolean,
      disabled: Boolean,
    },
    methods: { ... },

    render(createElement) {
      const isLink = this.href != null

      return createElement(
        isLink ? 'a' : 'button',
        {
          class: {
            'is-disabled': this.disabled,
            'is-outlined': this.outlined,
          },
          attrs: {
            href: isLink ? this.href : null,
            type: isLink ? null : this.type,
          },
          on: { click: this.onClick }
        },
        this.$slots.default
      )
    }
  }
</script>

Now the inner button element is programmatically created, this removes the repetition in the template for passing attributes, classes, listeners and so on.

Concretely we can replace all the template functionalities like v-if and v-for by a if / else statement or a Array.prototype.map in the render function.

This can be useful in many other situations, like for rendering a list without a root element which is not allowed in the template.

I'm Edouard Bozon, I play almost everyday with web technologies. I focus my work on building better JavaScript apps and contributing to open source. I'm self employed, currently working on awesome projects.