[BUG] Vue/Nuxt getting "Reference Error" on 0.9.0

[vin-ni]

Describe the bug
I didn't dig deeper yet, but while importing import nipplejs from 'nipplejs' the latest version 0.9.0, I get a Reference Error in nuxt. Actually the whole build freezes and doesn't even export a fail message.

To Reproduce
Steps to reproduce the behavior:

1. Set up a nuxt environment
2. import nipplejs from 'nipplejs'
3. Reload

Expected behavior
nipplejs doesn't create a Reference Error

Screenshots, Codepen or JSFiddle
If applicable, add screenshots, codepen or jsfiddle to help explain your problem.

Desktop (please complete the following information):

• OS: MacOs
• Browser: Chrome
• Version: Latest

Additional context
I looked a bit through the issues, but couldn't find a solution. For now I downgraded to 0.8.7.

[vin-ni]

Actually I also get it on 0.8.7

[vin-ni]

Getting closer, it seems to be a window is not defined issue.

[vin-ni]

I'm injecting it globally via nuxt.config.js for now:

    script: [
      {
        hid: 'nipplejs',
        src: 'https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.9.0/nipplejs.min.js',
        defer: true,
      },
    ],

[dataexcess]

Hello!

Does that make it work? I copied your script import and put it in my nuxt config but I still have the freezing build issue.

Then I found this vue wrapper. https://www.npmjs.com/package/vue-nipple .
I Made a file in my nuxt /plugins folder called nipple.js
in which I put the following code:

import Vue from "vue";
import Nipple from 'vue-nipple';

Vue.component('vue-nipple', Nipple)

and in my nuxt.config:

    plugins: [{
        src: "~/plugins/nipple.js",
        ssr: false,
        mode: 'client'
    }],

but then when I use a < Nipple / > component in my code it simply cannot find it 🤷‍♂️.

Nipple and Vue seems a match made in hell. T_T

[dataexcess]

EDIT: I'm stupid I was using the wrong component name in my code XD

Vue.component('Nipple', Nipple);

fixed it.