Isomorphic Style Injecting

[privatenumber]

What problem does this feature solve?

I feel like this feature exists given the addStylesClient.js and addStylesServer.js files in vue-style-loader, but I cannot find documentation on enabling this feature. Assuming this feature doesn't exist:

I am creating a third-party Vue component that is sophisticated and has styles of it's own. I would like to produce a built Vue component (*.js file) that contains the entirety of the component including it's styles; I do not want to extract the CSS into another file. This is so that the consuming end of the component can decide how to optimize the CSS: in their dev build, they would probably load the CSS on the client-side, and their production build would aggregate and extract the CSS into a file. In this way, I would like the styles to be loaded isomorphically.

Currently, when I build my component and load it via a NUXT server, I get the error "ReferenceError: document is not defined" on the line var styleElement = document.querySelector('style[data-vue-ssr-id~="' obj.id '"]') in the addStyle function. However, upon refreshing the page, the page loads fine with the styles. Perhaps this is because the server-side cached the rendered HTML and no longer attempts to re-render only to hit the same error.

What does the proposed API look like?

No API.

[Jinjiang]

If I understand the question correctly, you want to find a middle format of Vue SFC in JavaScript, which could be decided whether be extracted into a CSS file later. I'm afraid there is no current way to generate this kind of middle format. Now the two situations is switched just by different webpack config, not a JS API inside. It makes the bundling task possible to require different runtime code. So once the code generated by webpack, you have no chance to switch the mode any more. So now the best way is to just maintain the Vue SFC source code and two different webpack config. Generating such kind of middle format maybe also possible in some way but not easy and necessary imo. If anything misunderstood here please let me know. 🙂 Thanks.

[apertureless]

I have the same error. I am building reuseable components in a package which are builded as umd. They are mostly vue SFC and sometimes with out own styles included. However they are not extracted.

If I am using them in nuxt I get the same error on some reloads.

[superman66]

I have the same error, and solved it now. I want to use vue-highcharts component in my nuxt.js project. I define a global component in ~/plugins called vue-highcharts.js,

import Vue from 'vue'
import VueHighcharts from 'vue2-highcharts'

Vue.component('VueHighcharts', VueHighcharts)

and add it in nuxt.config.js:

plugins: [{ src: '~plugins/vue-highcharts.js', ssr: false }],

after that, I can use it in my project.

[Imagine-Tom]

I had the same problem.

[msacar]

Me too ..