Overview:

Nuxt Image Extractor is a npm module that allows you to download and store images from your CMS API in a folder inside the /dist directory of your Nuxt.js project. It also replaces the HTML sources with the local paths of the downloaded images. This module works with both the nuxt generate and nuxt export commands and supports image URL parameters. However, replacing payload image links is still not fully tested, so caution is advised when using this feature. Nuxt Image Extractor is based on a gist by emiliobondioli.

Features:

• Downloads images from your CMS API and stores them in a folder inside /dist
• Replaces HTML sources with the local paths of the downloaded images
• Works with both nuxt generate and nuxt export commands
• Supports image URL parameters like ?itok=gmJP5AbR
• Replaces payload image links (although this feature is not fully tested yet)

Installation:

To install and set up Nuxt Image Extractor, you need to follow these steps:

1. Add the nuxt-image-extractor dependency to your project.
2. Add nuxt-image-extractor to the modules section of your nuxt.config.js file.

Here is an example of how you can add the dependency and module to your project:

npm install nuxt-image-extractor

// nuxt.config.js
module.exports = {
  modules: [
    'nuxt-image-extractor',
  ],
}

Summary:

Nuxt Image Extractor is a helpful tool for Nuxt.js projects that need to download and store images from a CMS API. It simplifies the process by parsing each generated page, downloading the images, and replacing the HTML sources with the local paths. However, it is important to note that the feature for replacing payload image links is not fully tested and should be used with caution. Overall, Nuxt Image Extractor provides a convenient solution for managing images in Nuxt.js projects.