Description
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.