Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-community/imagemin-module
Automatically optimize (compress) all images used in Nuxt.js
https://github.com/nuxt-community/imagemin-module
image image-optimization image-processing imagemin images nuxt nuxt-module vuejs
Last synced: 3 months ago
JSON representation
Automatically optimize (compress) all images used in Nuxt.js
- Host: GitHub
- URL: https://github.com/nuxt-community/imagemin-module
- Owner: nuxt-community
- License: mit
- Created: 2019-10-10T13:25:29.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T00:34:01.000Z (5 months ago)
- Last Synced: 2024-07-20T01:33:57.054Z (4 months ago)
- Topics: image, image-optimization, image-processing, imagemin, images, nuxt, nuxt-module, vuejs
- Language: TypeScript
- Size: 265 KB
- Stars: 50
- Watchers: 8
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @nuxtjs/imagemin
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]
> Automatically optimize (compress) all images used in Nuxt.js
[📖 **Release Notes**](./CHANGELOG.md)
## Setup
1. Add `@nuxtjs/imagemin` dependency to your project
```bash
yarn add --dev @nuxtjs/imagemin # or npm install --save-dev @nuxtjs/imagemin
```
2. Add `@nuxtjs/imagemin` to the `buildModules` section of `nuxt.config.js`
```js
export default {
buildModules: [
// Simple usage
'@nuxtjs/imagemin',
// With options
['@nuxtjs/imagemin', { /* module options */ }]
]
}
```
:warning: 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
```js
export default {
buildModules: [
'@nuxtjs/imagemin'
],
imagemin: {
/* module options */
}
}
```
## Options
See [image-minimizer-webpack-plugin](https://github.com/webpack-contrib/image-minimizer-webpack-plugin#options) for the complete list of options available.
### `enableInDev`
- Type: `Boolean`
- Default: `false`
Images will be minified in development mode, if this option is set to `true`.
**This could increase the build time.**
## `minimizerOptions`
- Type: `Object`
- Default:
```js
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
['svgo', { plugins: [{ removeViewBox: false }] }]
]
```
## Development
1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `npm run dev`
## License
[MIT License](./LICENSE)
Copyright (c) Nuxt Community
[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/imagemin/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/imagemin
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/imagemin.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/imagemin
[github-actions-ci-src]: https://github.com/nuxt-community/imagemin-module/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-community/imagemin-module/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/imagemin-module.svg
[codecov-href]: https://codecov.io/gh/nuxt-community/imagemin-module
[license-src]: https://img.shields.io/npm/l/@nuxtjs/imagemin.svg
[license-href]: https://npmjs.com/package/@nuxtjs/imagemin