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.)

Answer 2

They would ideally support the use of data-* attributes, e.g., data-v-on:click, but it seems they don’t.

See their issue Why not using HTML5 data-* attributes.

It seems that it was possible to overwrite the used prefix, but this option seems to have been removed.