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.

npm install --save @staszek998/v-html

1.B. Using Yarn.

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

// 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

<!-- MyComponent.vue -->

<script>
import { Component as VHTML } from 'v-html'

export default {
    components: { VHTML }
}
</script>

2.B. Using the Plugin export

// 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 enabled.

// 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

<!-- 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:

<h1>Hello, World!</h1>

B. Using slot

<!-- MyComponent.vue -->

<template>
    <VHTML>{{ html }}</VHTML>
</template>

<script>
export default {
    data () {
        return {
            html: '<h1>Hello, World!</h1>'
        }
    },
}
</script>

Expected output:

<h1>Hello, World!</h1>

Authors

• IDEALIGN Stanisław Gregor 📧 🌐

Copyright © 2021 IDEALIGN Stanisław Gregor

Licensed under the MIT license.