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 . 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
I want to compile my component library to work with SSR and not have to import a large css file
Hello, thank you for taking time filling this issue!
However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).
I hope to see your helper-created issue very soon!