Nuxt.js: How to add a polyfil to nuxtjs ?

[etiennesanguinetti]

Hi everyone,

I'm trying to add the Web Animations API polyfil to nuxt js for compatibility with Safari (https://github.com/web-animations/web-animations-js), but I can't make it work.
I installed it using npm, and now I'm trying to make it available app-wide (I use it on my main page but also in the nuxt.config.js file, for transitions).
I found instructions for Angular (https://stackoverflow.com/questions/38836532/how-to-add-web-animations-api-polyfill-to-an-angular-2-project-created-with-angu), but I don't know how to transpose that to Nuxt.

Thanks a lot !

_{This question is available on Nuxt.js community (#c2347)}

[clarkdo]

You can install it by npm or yarn and put it into vendor:

// nuxt.config.js
module.exports = {
  build: {
    vendor: ['web-animations-js/web-animations.min']
  }
}

Then add a plugin file:

// nuxt.config.js
module.exports = {
  build: {
    vendor: ['web-animations-js/web-animations.min']
  },
  plugins: ['~/plugins/animations.js']
}

// plugins/animations.js
export default ({ app, store }) => {
  if (process.client) {
    require('web-animations-js/web-animations.min')
  }
}

But you need to pay attention that avoid using the api in SSR.

[agoretsky]

@clarkdo hi, how can we do it in nuxt-edge(there is no more vendors)? Thanks

[clarkdo]

@agoretsky hi, nuxt-edge introduced a config build.transpile for supporting external lib transpiling.

  build: {
    transpile: [
      'vue\\.test\\.js', // string
      /vue-test/         // regex pattern
    ]
  }

[christophwolff]

@clarkdo Thank you, but could you explain in more detail. i want to load some polyfills. How to add i.e. the intersection-observer polyfill. Thanks!

[clarkdo]

@christophwolff

options of transpile which can match the files you want to be traspiled by babel:

1. a string to match the name of lib
2. a regex pattern to match the name of lib

It should be not related what you want to do (add intersection-observer polyfill), for adding intersection-observer, you can directly install the https://github.com/w3c/IntersectionObserver/tree/master/polyfill, then add it into head scripts or import it anywhere you want to use.

[davision]

I have a similar question. Previously, I was importing intersection-observer polyfill with a vendor like this:

  build: {
    vendor: [
      'intersection-observer',
    ],
}

How to include it in Nuxt 2, since a vendor is deprecated?

[aldarund]

@davision just import it in plugin for example

[davision]

If I import like this: import intersectionObserver from 'intersection-observer' in observer.js.

I got an error:

✖ error ReferenceError: window is not defined

Do I need to write something else?

[nicolashmln]

@davision importing the plugin like that in the nuxt.config.js works for me

plugins: [
  { src: '~/plugins/intersection-observer', ssr: false },
],

And the content in the ~/plugins/intersection-observer.js file

import intersectionObserver from 'intersection-observer'

[davision]

Thank you for a hint! ssr: false did the trick. Cheers!

[kevcodez]

I am getting

null is not an object (evaluating 'this.observer.disconnect')

in Safari. Did you run into this @davision @nicolashmln

[kevcodez]

I took another approach. I included this in my nuxt.config.js

export const head = {
...
script: [
        {src: "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"}
    ]
}

Worked like a charm.

[davision]

Also an elegant solution. I didn't have issues with Safari tough but will keep an eye on that. Thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.