-
Notifications
You must be signed in to change notification settings - Fork 634
Vue.js => style tags are rendered twice #103
Comments
I have the same problem (I think). The spa-plugin does not add the styles twice, but they are added again by Vue when you mount on top of the prerendered dom. |
@thorning yeah, my bad, thank you for the correction. |
I have the same issue. |
This is normal. It is similar to issues #105 and (loosely) #107. Your endpoints are rendering and capturing the HTML verbatim. If Vue injects more on dynamic mount, it will be duplicate Use From the README doc: // Manually transform the HTML for each page after prerendering,
// for example to set the page title and metadata in edge cases
// where you cannot handle this via your routing solution.
//
// The function's context argument contains two properties:
//
// - html :: the resulting HTML after prerendering)
// - route :: the route currently being processed
// e.g. "/", "/about", or "/contact")
//
// Whatever is returned will be printed to the prerendered file.
postProcessHtml: function (context) {
var titles = {
'/': 'Home',
'/about': 'Our Story',
'/contact': 'Contact Us'
}
return context.html.replace(
/<title>[^<]*<\/title>/i,
'<title>' + titles[context.route] + '</title>'
)
} |
@drewlustro That is totally inconvenient and is exactly what I have described in more detail in the original comment of this ticket. IMO, this package should have a leading zero in its version, since it doesn't solve one of the foundational necessities, basic CSS usage. |
I'm pretty sure the issue is not with this package, but with the vue remounting (I think they call it hydration). The output from this plugin is as I want it, html and stylus to show the rendered page correct independent of Vue. The problem is that when mounting Vue on top of the prerender, it does not detect that the styles are already injected, and injects them again. You could try to make a issue in the Vue repository, to see if there is a way to improve loading vue on top of a prerendered DOM. I must admit that my solution so far is to ignore it, and let the double style tags exist, though it is not optimal. |
@thorning One of the solutions is to import all styles from one component. - That way you can get rid of the only style tag, using regexp and @chrisvfritz However, I believe this ticket should still be open for those, who are familiar enough with this package to add a check on existing style tags in the document, before processing output. |
@thorning sorry, just realized that you still want to have your styles prerendered and my solution would bring you a CSS flash. Since there are no styles loaded before rendering. The actual solution for us would be to use extract-text-webpack-plugin and then inject css using html-webpack-plugin. That way there won't be any styles in the JS bundle. And the styles would still be prerendered, since they would be present in the P.S. for more details on CSS extraction, check SSR guide |
@chrisvfritz Please check out my previous comment, it might help you to resolve this issue. |
@OlzhasAlexandrov I think it's worth adding a note about this to the README - PR welcome. 🙂 As you said, the problem doesn't have anything to do with this plugin specifically (or even Vue actually), but simply a reality of prerendering. If you inject styles into the body during render (or modify the HTML in any other way), we'll capture that. If that's not intended, it shouldn't be part of the render process. |
@chrisvfritz okay, added a note here: #110 |
@OlzhasAlexandrov Thanks! |
Thank you for a nice plugin!
When using with Vue.js, the plugin, unfortunately, inlines the
<style>
tags from Vue.js single file components twice.Please let me know, if such behavior is intended and the only choices for now are to either remove the duplicates by running regex on them:
or to extract css in a separate file.
I'm currently using the regex method, but please let me know, if there is a way to not duplicate the
<style>
tags.Also, if you need a reproduction repo, I could quickly prepare that as well, if there's a need for it.
Thank you very much!
The text was updated successfully, but these errors were encountered: