# vue-any-element

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

Latest version **1.0.0** (published 2018-06-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-any-element
pnpm add vue-any-element
yarn add vue-any-element
bun add vue-any-element
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-06-16 |
| First published | 2018-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Adam Lynch |
| Maintainers | adam-lynch |
| Keywords | vue, dynamic, component, tag, dom, element |

## Links

- npm: https://www.npmjs.com/package/vue-any-element
- Repository: https://github.com/adam-lynch/vue-any-element
- Homepage: https://github.com/adam-lynch/vue-any-element#readme
- Issues: https://github.com/adam-lynch/vue-any-element/issues
- npm.io page: https://npm.io/package/vue-any-element

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-06-16

## README

# 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`:

```html
<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`:

```javascript
import AnyElement from 'vue-any-element';

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

### Output

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


---

Learn more about [render functions](https://vuejs.org/v2/guide/render-function.html).

---
_Source: https://npm.io/package/vue-any-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._