Is there a way to validate HTML syntax in Vue?

Question

I have an component which basically takes everything from input and renders the html:

<template>
    <div>
        <input type="text" v-model="html">
        <VRuntimeTemplate :template="html" />
    </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template'

export default {
    data: () => ({
        html: ''
    }),
    components: {
        VRuntimeTemplate
    }
}
</script>

Now when I start to type then it will obviously throw me the error saying the input value doesn't have closing or ending tag.

Is there a way to validate HTML beforehand? It works fine with v-html but there's a problem with third party modules.

Sandbox: https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14

Answer 1

Depending on when you need to validate the HTML there are a couple of options.

To validate input dynamically you can follow this answer: Check if HTML snippet is valid with JavaScript

If you want to validate the HTML output of the Vue Component there is a vue-cli plugin here: https://gitlab.com/html-validate/html-validate-vue

I ran into the same issue and ended up going with the first option as I need to validate user supplied HTML that will be emitted in another vue app.