Vue-cli 3 component library to support SSR

Question

I am creating a custom component library that i want to share across multiple domains.

Domains:

Each domain has its own instance of nuxt
Each domain has my-component-lib registered in package.json

Each domain registers the lib as a plugin

//my-component-lib.js
import components from 'my-component-lib'
import Vue from 'vue'

export default ({ store }) => {
 Vue.use(components, { store: store })
}

//nuxt.config.js
plugins: [
  /*Desired option 1*/ '@/plugins/my-component-lib',
  /*Currently using*/ { src: '@/plugins/my-component-lib', ssr: false }
]

my-component-lib:

Setup using vue-cli 3
The library is composed of basic html tags and CSS ex <input ></input>. The styling is important and i would like to keep it together with the component (extract:false) so i can pull individual components out and not worry about importing a css file.
```
//vue.config.js
module.exports = {
 outputDir: 'dist',
 lintOnSave: false,
 css: {
  extract: false
 }
}
```

setup for production using "production": "vue-cli-service build --target lib --name sc components/index.js"

Problems:

Using the desired option, when i run nuxt npm run dev i get a document is not defined in function addStyle (obj /* StyleObjectPart */) {..} within sc.common.js
Using the current option, i get a hydration error(The client-side rendered virtual DOM tree is not matching server-rendered content.) which is fixed if i wrap the components within <no-ssr> tags which i do not want to do.

I want to compile my component library to work with SSR and not have to import a large css file

How do you fixed the second problem? I am having the same issue. — patrick
FYI If you are nesting html tags inside <p> tag throws that error — Jujubes
Also make sure ur not using document or Windows until the component is mounted — Jujubes
I switched the css prop to true but i a still having the same issue. Are you using scss or sass in your project? — patrick

Jujubes Jujubes · Accepted Answer · 2020-02-14T22:01:05

Change

 ...
 css: {
  extract: false
 }
 ...

to true

Vue-cli 3 component library to support SSR

1 Answers