Ease adding polyfills to Nuxt.js projects using Polyfill.io among others
npm install nuxt-polyfill
Feature Detection
npm install nuxt-polyfill
`
Add the module to your nuxt.config.js:
`javascript
export default {
// Configure polyfills:
polyfill: {
features: [
/*
Feature without detect:
Note:
This is not recommended for most polyfills
because the polyfill will always be loaded, parsed and executed.
*/
{
require: 'url-polyfill' // NPM package or require path of file
},
/*
Feature with detect:
Detection is better because the polyfill will not be
loaded, parsed and executed if it's not necessary.
*/
{
require: 'intersection-observer',
detect: () => 'IntersectionObserver' in window,
},
/*
Feature with detect & install:
Some polyfills require a installation step
Hence you could supply a install function which accepts the require result
*/
{
require: 'smoothscroll-polyfill',
// Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
detect: () => 'scrollBehavior' in document.documentElement.style && window.__forceSmoothScrollPolyfill__ !== true,
// Optional install function called client side after the package is required:
install: (smoothscroll) => smoothscroll.polyfill()
}
]
},
// Add it to the modules section:
modules: [
'nuxt-polyfill',
]
}
`
Note: You need to install the NPM packages manually.
In order to run this example:
`
npm i url-polyfill intersection-observer smoothscroll-polyfill
`
Useful polyfill links (including detection functions):
- https://github.com/Financial-Times/polyfill-library
Documentation
$3
Type String. Not required.
$3
Type String. NPM package or require path of JS file.
$3
Type Function. Detection function, should return a Boolean.
$3
Type Function`. Installation function. First argument is the default export in the required file/package.