vue-cli build a lib SSR - CSS issue

Question

I'm using vue-cli 3 to create a lib for npm. All seems to be ok apart from that when a include the css into JavaScript, the lib does not work in server side rendering like Nuxt. It keeps saying document is not defined with fair reason.

So, my question is how to make it ready for SSR using embedded CSS?

I'm currently using

vue-cli-service build --target lib --name myLibName *.js

Also my vue config file

module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
        output: {
            libraryTarget: 'umd',
        },
    },
};

I tried to use libraryExport: default as said in the vue-cli docs, but no luck.

Finally, yeah, if I extract CSS into a file everything works as expected with SSR.

Hi Tiago, I have the same problem as you. Did you finally solve it ? By requiring CSS and the component separately ? — Quentin
Hi mate, I ended up forgetting to answer my own issue. Apparently there is no way to build in CSS in with SSR support. I also ended up realising that this is not ideal. Most big libraries use separate CSS. So, go for it mate. — Tiago Matos

Tiago Matos Tiago Matos · Accepted Answer · 2019-07-04T23:20:59

Apparently there is no way to build in CSS with SSR support. I also ended up realising that this is not ideal. Most big libraries use separate CSS.

My final solution is just setting up vue-cli-service to build the code as a library like so.

vue-cli-service build --target lib --name myLibName *.js

And no need to change anything in config file. It is all done out of the box, unless you want something special.

Cheers.

vue-cli build a lib SSR - CSS issue

1 Answers