Build module for Nuxt.js to download remote images and include them as local files in the generated build when performing full static generation.
β¨π¦ Shiny!
Magpie aims to take Nuxt's full static generation a step further, to create a standalone build with no API calls and no remote image assets.
/dist
foldernuxt
version >= 2.14.0
In its current version, even with full static generation enabled, nuxt still runs the fetch
and asyncData
calls when navigating to another route (as documented here). To prevent these calls from overriding the urls replaced by magpie, you can add a check in your fetch
or asyncData
to bail fetching if the requested data is already available.
nuxt-magpie
dependency to your projectyarn add nuxt-magpie # or npm install nuxt-magpie
nuxt-magpie
to the buildModules
section of nuxt.config.js
{
buildModules: [
// Simple usage
"nuxt-magpie",
// With options
[
"nuxt-magpie",
{
/* module options */
}
]
];
}
full static
generation in nuxt.config.js
:{
ssr: true,
target: 'static'
}
nuxt generate
All options and their default values:
{
path: '/_images', // dir inside /dist where downloaded images will be saved
extensions: ['jpg', 'jpeg', 'gif', 'png', 'webp'],
baseUrl: '', // only download images from a certain url (e.g. your backend url)
verbose: false, // show additional log info
concurrency: 10, // max concurrent image downloads
keepFolderStructure: false, // re-creates original image paths when saving local copies
replaceInChunks: true, // attempts to replace image urls in the generated javascript chunks
alias: null // see below for details
}
You can provide aliases to be replaced before image lookup.
For example, Strapi doesn't return the full image urls when using the default upload provider, but instead uses the format /uploads/image-name
.
You can use the alias
option to make sure all image paths are parsed correctly:
{
/* ... Magpie options */
alias: {
'/uploads': 'http://localhost:1337/uploads'
}
}
yarn install
or npm install
npm run dev
Copyright (c) Emilio Bondioli