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

Question

I have two packages in a monorepo environment,

A nuxtjs app.
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?

Marco Rizzato Marco Rizzato · Accepted Answer · 2020-11-17T22:07:35

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:

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

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)

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.

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

1 Answers