JSFiddle - React, Tailwind, and code Playground

Using component with is to dynamically return a standard HTML element.

by Travis Almand

HTML

<div id="app">
  <btn-test href="https://www.google.com">link</btn-test>
  <btn-test>button</btn-test>
</div>

Vue

console.clear();

Vue.component('btn-test', {
	template: '<component :is="type" :href="href"><slot></slot></component>',
  props: {
  	href: {
    	type: String,
      default: null
    }
  },
  computed: {
  	type () {
    	return this.href ? 'a' : 'button';
    }
  }
});

new Vue({
  el: "#app",
  data: {
    
  },
  methods: {
  	
  }
})