https://github.com/adam-lynch/vue-any-element

A Vue.js component which allows you to dynamically change the tag of a child element without loads of awkward code
https://github.com/adam-lynch/vue-any-element

vue vuejs

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adam-lynch/vue-any-element
• Owner: adam-lynch
• License: mit
• Created: 2018-06-16T23:01:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-17T11:00:50.000Z (over 6 years ago)
• Last Synced: 2024-11-22T07:48:18.999Z (about 1 month ago)
• Topics: vue, vuejs
• Language: JavaScript
• Homepage: https://adamlynch.com
• Size: 3.91 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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`](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

  

    Hello  World!

  

```

`Example.js`:

```javascript

import AnyElement from 'vue-any-element';

export default {

  components: {

    AnyElement,

  },

  data() {

    return {

      rootTag: 'p',

      innerTag: 'span',

    }

  }

}

```

### Output

```html

Hello World

```


---

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