Reusable component to render button or router-link in Vue.js

Question

I'm new using Vue.js and I had a difficulty creating a Button component.

How can I program this component to conditional rendering? In other words, maybe it should be rendering as a router-link maybe as a button? Like that:

<Button type="button" @click="alert('hi!')">It's a button.</Button>
// -> Should return as a <button>.

<Button :to="{ name: 'SomeRoute' }">It's a link.</Button>
// -> Should return as a <router-link>.

Answer 1

You can toggle the tag inside render() or just use <component>.

According to the official specification for Dynamic Components:

You can use the same mount point and dynamically switch between multiple components using the reserved <component> element and dynamically bind to it's is attribute.

Here's an example for your case:

ButtonControl.vue

<template>
  <component :is="type" :to="to">
    {{ value }}
  </component>
</template>

<script>
export default {
  computed: {
    type () {
      if (this.to) {
        return 'router-link'
      }

      return 'button'
    }
  },

  props: {
    to: {
      required: false
    },
    value: {
      type: String
    }
  }
}
</script>

Now you can easily use it for a button:

<button-control value="Something"></button-control>

Or a router-link:

<button-control to="/" value="Something"></button-control>

This is an excellent behavior to keep in mind when it's necessary to create elements that may have links or not, such as buttons or cards.