Skip to content

Vue-cli 3 component library to support SSR #4957

@mjmnagy

Description

@mjmnagy

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions