Skip to content

Commit

Permalink
fix(docs): update Installation instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
juliomrqz committed Mar 30, 2020
1 parent b747b41 commit ef86870
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 29 deletions.
20 changes: 11 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,26 @@ Image sizes can often get reduced up to 60%, but this is not the only thing `@ba

## Installation

:warning: `node >= 8` and `nuxt >= 2` are required.
:warning: `node >= 10` and `nuxt >= 2` are required.


```bash
npm install @bazzite/nuxt-optimized-images
npm install --save-dev @bazzite/nuxt-optimized-images
```

or

```bash
yarn add @bazzite/nuxt-optimized-images
yarn add --dev @bazzite/nuxt-optimized-images
```

Add `@bazzite/nuxt-optimized-images` to modules section of nuxt.config.js:
Add `@bazzite/nuxt-optimized-images` to `buildModules` section of nuxt.config.js:

:warning: If you are using Nuxt `< 2.9.0`, use `modules` instead.

```js
{
modules: [
buildModules: [
'@bazzite/nuxt-optimized-images',
],

Expand Down Expand Up @@ -86,20 +88,20 @@ The following optimization packages are available and supported:
Example: If you have JPG, PNG, and SVG images in your project, you would then need to run

```sh
npm install imagemin-mozjpeg imagemin-pngquant imagemin-svgo
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

# or

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-svgo
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo
```

To install **all** optional packages, run:
```sh
npm install imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp

# or

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp
```

:warning: Please note that by default, images are only optimized for **production builds, not development builds**. However, this can get changed with the [`optimizeImagesInDev` config][docs-configuration-optimizeimagesindev].
Expand Down
22 changes: 12 additions & 10 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: "Automatically optimizes images used in Nuxt.js projects (jpeg, png
permalink: /docs/nuxt-optimized-images/
created: "2019-03-01T13:35:06.636Z"
published: "2019-03-01T13:35:06.636Z"
modified: "2019-11-27T21:34:59.535Z"
modified: "2020-03-30T22:52:20Z"
---

# Nuxt Optimized Images
Expand All @@ -29,25 +29,27 @@ Image sizes can often get reduced up to 60%, but this is not the only thing `@ba
## Installation

```bash
npm install @bazzite/nuxt-optimized-images
npm install --save-dev @bazzite/nuxt-optimized-images
```

or

```bash
yarn add @bazzite/nuxt-optimized-images
yarn add --dev @bazzite/nuxt-optimized-images
```

::: warning
Node >= 8 and Nuxt.js >= 2 are required.
Node >= 10 and Nuxt.js >= 2 are required.
:::


Add `@bazzite/nuxt-optimized-images` to modules section of nuxt.config.js:
Add `@bazzite/nuxt-optimized-images` to `buildModules` section of nuxt.config.js:

:warning: If you are using Nuxt `< 2.9.0`, use `modules` instead.

```js
{
modules: [
buildModules: [
'@bazzite/nuxt-optimized-images',
],

Expand Down Expand Up @@ -90,20 +92,20 @@ The following optimization packages are available and supported:
Example: If you have JPG, PNG, and SVG images in your project, you would then need to run

```bash
npm install imagemin-mozjpeg imagemin-pngquant imagemin-svgo
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

# or

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-svgo
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo
```

To install **all** optional packages, run:
```bash
npm install imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
npm install imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp

# or

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp
```

::: warning
Expand Down
22 changes: 12 additions & 10 deletions docs/es/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: "Optimiza automáticamente las imágenes utilizadas en los proyecto
permalink: /docs/nuxt-optimized-images/
created: "2019-03-01T13:35:06.636Z"
published: "2019-03-01T13:35:06.636Z"
modified: "2019-11-27T21:34:59.535Z"
modified: "2020-03-30T22:52:20Z"
---

# Imágenes Optimizadas para Nuxt
Expand All @@ -29,25 +29,27 @@ El tamaño de las imágenes puede reducirse hasta un 60%, pero esto no es lo ún
## Instalación

```bash
npm install @bazzite/nuxt-optimized-images
npm install --save-dev @bazzite/nuxt-optimized-images
```

o

```bash
yarn add @bazzite/nuxt-optimized-images
yarn add --dev @bazzite/nuxt-optimized-images
```

::: warning Advertencia
Node >= 8 y Nuxt.js >= 2 son necesarios.
Node >= 10 y Nuxt.js >= 2 son necesarios.
:::


Añade `@bazzite/nuxt-optimized-images` a la sección de módulos de nuxt.config.js:
Añade `@bazzite/nuxt-optimized-images` a la sección `buildModules` de nuxt.config.js:

:warning: Si estás usando Nuxt `< 2.9.0`, usa `modules` en su lugar.

```js
{
modules: [
buildModules: [
'@bazzite/nuxt-optimized-images',
],

Expand Down Expand Up @@ -89,21 +91,21 @@ Los siguientes paquetes de optimización están disponibles y soportados:
Ejemplo: Si tienes imágenes JPG, PNG y SVG en tu proyecto, necesitarás ejecutar

```bash
npm install imagemin-mozjpeg imagemin-pngquant imagemin-svgo
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo

# o

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-svgo
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-svgo
```

Para instalar **todos** los paquetes opcionales, ejecuta:

```bash
npm install imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
npm install --save-dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp

# o

yarn add imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader jimp
yarn add --dev imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo webp-loader lqip-loader responsive-loader sqip-loader sharp
```

::: warning Advertencia
Expand Down
3 changes: 3 additions & 0 deletions example/nuxt.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ module.exports = {
modules: [
// Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
'@nuxtjs/bulma',
],

buildModules: [
path.resolve('../lib/index.js')
],

Expand Down

0 comments on commit ef86870

Please sign in to comment.