Skip to content

Validating Vue syntax with W3C

I’m doing this course where I can freely select a framework to build a simple application. However, we are to validate the HTML with the W3C validator.

I have no idea how. The W3C validator does not support Vue-specific stuff. Errors such as:

Attribute v-for not allowed on element div at this point.
Attribute :key not allowed on element div at this point.

Is everywhere. And this is just for one line of code.

          <div v-for="mov in movie" :key="mov.id">

Am I doing something wrong, or am I stupid or something? How on earth do I use W3C validator with Vue? Or any other framework that has attributes that deviates (thinking of “classname” in React).

Note that the W3C validator must be used, no other kind of validator.

Thanks!

Answer

It was me being stupid.

Martin Bean commented:

And who’s mandated this? Vue templates are not HTML. They’re, well, Vue templates. They’ll get compiled to HTML, so you’ll need to validate the resultant HTML; not the template that is parsed by Vue.

Which was the solution to the problem, or how you now may want to put it.