Automatically Optimize (compress) all Images Used in Nuxt.js


Automatically optimize (compress) all images used in Nuxt.js

šŸ“– Release Notes


  1. Add @nuxtjs/imagemin dependency to your project
yarn add --dev @nuxtjs/imagemin # or npm install --save-dev @nuxtjs/imagemin
  1. Add @nuxtjs/imagemin to the buildModules section of nuxt.config.js
export default {
  buildModules: [
    // Simple usage

    // With options
    ['@nuxtjs/imagemin', { /* module options */ }]

āš ļø If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
  imagemin: {
    /* module options */


See imagemin-webpack options for the complete list of options available.


  • Type: Boolean
  • Default: false

Images will be minified in development mode, if this option is set to true.

This could increase the build time.


  • Type: Object
  • Default:
  plugins: [
    ['gifsicle', { interlaced: true }],
    ['jpegtran', { progressive: true }],
    ['optipng', { optimizationLevel: 5 }],
    ['svgo', { plugins: [{ removeViewBox: false }] }]


  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

Download Details:

Author: nuxt-community

Source Code:

#vue #vuejs #javascript #nuxtjs

Automatically Optimize (compress) all Images Used in Nuxt.js
14.50 GEEK