How to build Vue components as a library for Nuxtjs with SSR support?

Question

I have two packages in a monorepo environment,

1. A nuxtjs app.
2. A Vue 2 components library.

I'm trying to build the components package as a "Library" so that I can import the components in the Nuxt app.

After building-installing-importing the library, the nuxt raises the following error:

document is not defined

inside the library build

function o(e) {
  var t, n, i = document.querySelector('style[data-vue-ssr-id~="' + e.id + '"]');
  if (i) {
    if (f) return g;
    i.parentNode.removeChild(i)
  }
  if (m) {
             

I get that it's because nuxt is encountering the browser's document object when it's attempting to render the page on the server-side.

Just a thought, is it because I'm using in-component styles?

It'd be great if someone could confirm it?

Answer 1

If you want to create a full Vue SSR library, you can follow this very useful guide.

Otherwhise you can tell Nuxt to load your library only on client side in this way:

1. In your Nuxt application create the file plugins/my-vue-library-plugin.js

2. Fill it with this content for import your Vue component library:

   import Vue from 'vue'
   import MyLibrary from 'my-vue-library-path'
   
   Vue.use(MyLibrary)
   

3. Then add the file path inside the plugins key of our nuxt.config.js

    export default {
      plugins: [
        { src: '~/plugins/my-vue-library-plugin.js', mode: 'client' }
      ]
    }
   

How you can see the mode: 'client' property is the key because tells Nuxt to load the library only on client side, so your document is not defined error should disappear.

Let me know if it helps.