Nuxt.js: Generate valid html

Created on 23 Mar 2017 · 14Comments · Source: nuxt/nuxt.js

Hi,

I’d like to generate valid html output when in production… Actually there are 3 problems:

html attributes comes without spacing when minified → This isn’t allowed(http://www.w3.org/TR/html5/syntax.html#start-tags see point 4)
n-x attributes are used → html5 only allow custom attributes if they start by data-*. How can I change this settings? The html-head section of the doc show the custom attributes names, but don’t explain if it’s customisable, and how. Besides, there’s also a n-head-ssr in the default app.html
defer in scripts that are not loaded → a script tag is added at the end of the file, with the attribute defer, but it's only allowed if the attribute src="" is used; not on "containing" script tags. I think this is this in default app.html:

 <script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt, { isJSON: true }) %></script>

For the first point, this is a webpack configuration to add, but maybe having simple options to switch in nuxt.config.js would be better? And with a default to not remove spaces? Actually, I couldn't find yet how to get this properly with the extend options.

The third point could be solved by using a custom Template, but once again, shouldn't an "out-of-the-box" code be valid in the first time?

Thanks for your help.

_{This feature request is available on Nuxt.js community (#c369)}

available soon enhancement

Source

EmmanuelBeziat

👍1

Most helpful comment

The 0.10 release it out ✋

I talked to Evan You, he will update the server-rendered key to data-server-rendered to generate 100% valid HTML.

Atinux on 24 Mar 2017

❤2 👍2

All 14 comments

Hi @EmmanuelBeziat

html attributes comes without spacing when minified → This isn’t allowed(http://www.w3.org/TR/html5/syntax.html#start-tags see point 4)

This is fixed in the next release, and the html-minifier option will be customizable via generate.minify in the nuxt.config.js

defer in scripts that are not loaded → a script tag is added at the end of the file, with the attribute defer, but it's only allowed if the attribute src="" is used; not on "containing" script tags.

Fixed in the upcoming release.

n-x attributes are used → html5 only allow custom attributes if they start by data-*. How can I change this settings? The html-head section of the doc show the custom attributes names, but don’t explain if it’s customisable, and how. Besides, there’s also a n-head-ssr in the default app.html

I can change it, but the HTML is still not valid because of the server-rendered attribute of vue.js:
screen shot 2017-03-23 at 22 42 24

I asked Evan if we can customize this attribute to be able to generate valid HTML markup, I'll keep this thread updated 👍

Atinux on 23 Mar 2017

👍2

Yay, awesome. Thanks a lot!

EmmanuelBeziat on 23 Mar 2017

The 0.10 release it out ✋

I talked to Evan You, he will update the server-rendered key to data-server-rendered to generate 100% valid HTML.

Atinux on 24 Mar 2017

❤2 👍2

Excellent! Thanks again!

EmmanuelBeziat on 24 Mar 2017

Hi, me again, sorry!

There’s another issue with vue-meta, as "hid" isn’t valid. Is there a way to change it to something else (like simply "id")? If I change it myself, it’s not replaced in child views.

Thanks!

EmmanuelBeziat on 27 Mar 2017

Hi,
Any update on this?

Thanks!

EmmanuelBeziat on 26 Apr 2017

@EmmanuelBeziat

vue 2.3 released
https://github.com/vuejs/vue/releases/tag/v2.3.0

server-rendered -> data-server-rendered

seems we can validate w3c forward a step