Vue.js => style tags are rendered twice

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:

postProcessHtml: function (context) {
    return context.html.replace(
        /(<style(.*?)<\/style>)/i,
        ''
    )
}

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!

[drewlustro]

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 <style> markup.

Use postProcessHtml to sanitize your HTML into one unique set of CSS or JSS markup.

---

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>'
  )
}

[thorning]

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.