@staszek998/v-html
Version:
Simple Vue component capable of rendering the passed-in HTML string without wrapping it within a redundant HTML tag.
153 lines (104 loc) • 2.59 kB
Markdown
# VHTML
> Simple _Vue_ component capable of rendering the passed-in HTML string **without** wrapping it within a redundant HTML tag.
>
> Why? Because `v-html` directive is not always an option 🙂
**Table of contents**
[[_TOC_]]
## Installation
### 1. Download the package
#### 1.A. Using NPM.
```bash
npm install --save @staszek998/v-html
```
#### 1.B. Using Yarn.
```bash
yarn add @staszek998/v-html
```
### 2. Implement the component within your _Vue_ application
_VHTML_ exposes two named exports: `Component` and `Plugin`. Here's how to use them:
#### 2.A. Using the `Component` export
##### 2.A.a. Installing the component globally, for use _within the whole app_
```typescript
// main.(j|t)s
import Vue from 'vue'
import { Component as VHTML } from 'v-html'
Vue.component('VHTML', VHTML)
```
##### 2.A.b. Installing the component locally, for use _within a single component_
```vue
<!-- MyComponent.vue -->
<script>
import { Component as VHTML } from 'v-html'
export default {
components: { VHTML }
}
</script>
```
#### 2.B. Using the `Plugin` export
```typescript
// main.(j|t)s
import Vue from 'vue'
import { Plugin as VHTML } from 'v-html'
Vue.use(VHTML)
```
### 3. Update your project's configuration
_VHTML_ requires _Vue_ to be running with the **[runtime compiler](https://cli.vuejs.org/config/#runtimecompiler)
enabled**.
```javascript
// vue.config.js
module.exports = {
runtimeCompiler: true
}
```
## Usage
You can utilise the _VHTML_ in two ways: using the `html` prop or by passing the HTML right into the component, using
the default `<slot>`.
### A. Using prop
```vue
<!-- MyComponent.vue -->
<template>
<VHTML v-bind="{ html }"/>
<!-- OR -->
<VHTML :html="html"/>
</template>
<script>
export default {
data () {
return {
html: '<h1>Hello, World!</h1>'
}
},
}
</script>
```
Expected output:
```html
<h1>Hello, World!</h1>
```
### B. Using slot
```vue
<!-- MyComponent.vue -->
<template>
<VHTML>{{ html }}</VHTML>
</template>
<script>
export default {
data () {
return {
html: '<h1>Hello, World!</h1>'
}
},
}
</script>
```
Expected output:
```html
<h1>Hello, World!</h1>
```
## Authors
- IDEALIGN Stanisław Gregor [📧](mailto:developer@staszek.codes) [🌐](https://gitlab.com/staszek.codes)
---
Copyright © 2021 IDEALIGN Stanisław Gregor
Licensed under the [MIT license](./LICENSE).