Skip to content

Isomorphic Style Injecting #893

Open
@privatenumber

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions