Extract CSS for use in SSR (Vue.js) Extract CSS for use in SSR (Vue.js) vue.js vue.js

Extract CSS for use in SSR (Vue.js)


This is is somewhat hacky (IMO) but I recently did something similar on the client side where I need to replace a:hover CSS with color values from the Vuex store (as you may know pseudo selectors can't be changed with JS alone).

You can create a component that sets styles directly in Vue with JavaScript values, or in your case, you could just replace the CSS with what you're pulling from the ExtractTextPlugin.

In your JavaScript file declaring Vue:

Vue.component('v-style', {  render: function (createElement) {    return createElement('style', this.$slots.default)  }})

In a Vue component:

<v-style>  a:hover {    color: {{ colors.hover }}  }</v-style>

I would imagine this will render find on the server side but I haven't tried it. I assume you could replace the a:hover part of the above code with your style declarations. It won't be in head but I don't imagine that should matter?

Taken from this SO answer: https://stackoverflow.com/a/54586626/895091