-
-
Couldn't load subscription status.
- Fork 6.3k
Description
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 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