W3C Validation and Vue's HTML binding syntax

Question

When I validate my page with the W3C validator, I get this error with Vue's event and binding syntax:

Error: Attribute v-on:click not allowed on element div at this point.

Is there a way to fix this?

Answer 1

You can create a specific regular expression for ignoring errors caused through vue.js usage:

Attribute "((v-|:)[^"]+|@click)" not allowed

This regex can be used in different ways depending on how exactly you are validating your project. For example if you are using the CLI version of vnu.jar you can put it into a file and use the --filterfile LIST_OF_REGEXES.txt option. Or if you are setting up your own vnu.jar server then you can use -Dnu.validator.servlet.filterfile=LIST_OF_REGEXES.txt.

(Sadly, some wrappers such as html-validator/html-validator-cli for node and gulp-html apparently only support ignore strings and not regular expressions. Others such as grunt-html and html5validator so support it though.)

BTW, the style of the quotes changed, in older versions it would use unicode smart quotation marks per default and the regular expression needs to be adapted to that.