vue-any-element

A Vue.js component which allows you to dynamically change the tag of a child element saving loads of awkward code.

Installation

You can just copy it (AnyElement.js) into your project (it's really short) or you can install it from npm;

npm install vue-any-element

API

It accepts a tag prop (e.g. div) and whatever inner HTML you pass will be output within that (div) element.

Example

Input

Example.vue:

<template>
  <any-element :tag="rootTag">
    Hello <any-element class="b" :tag="innerTag"> World!</any-element>
  </any-element>
</template>
<script src="./DealHeader.js"></script>

Example.js:

import AnyElement from 'vue-any-element';

export default {
  components: {
    AnyElement,
  },
  data() {
    return {
      rootTag: 'p',
      innerTag: 'span',
    }
  }
}

Output

<p>Hello <span class="b">World</p>

Learn more about render functions.