Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
- Loading branch information
Showing
12 changed files
with
177 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
title: Static images | ||
description: 'Optimizing images for static websites' | ||
--- | ||
|
||
If you are building a static site, Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages. | ||
|
||
:::alert{type="info"} | ||
Even if you are using another provider, you can opt-in to this generate behaviour for a particular image by setting `provider="static"` directly. (See [component documentation](/components/nuxt-img) for more information.) | ||
::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,68 @@ | ||
--- | ||
title: IPX Provider (static) | ||
description: 'Nuxt Image internally use IPX as static provider.' | ||
title: IPX Provider | ||
description: 'Self hosted image provider' | ||
navigation: | ||
title: IPX (static) | ||
title: IPX | ||
--- | ||
|
||
When no provider is specified globally, the default provider is `static` which uses [IPX](https://github.com/nuxt-contrib/ipx). | ||
|
||
IPX is an opensource and self-hosted image optimizer based on [Sharp](https://github.com/lovell/sharp) developed by the Nuxt team. | ||
Nuxt Image comes with a preconfigured instance of [ipx](/providers/ipx) to provide image transformations based on [sharp](https://github.com/lovell/sharp). | ||
IPX is an open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp). | ||
|
||
The image module internally uses IPX for static image optimization but you can also self-host it as a runtime optimizer by enabling the provider. | ||
## Self-hosting `ipx` in production | ||
|
||
### Static assets | ||
### Using CDN | ||
|
||
It's common if you are using a third-party provider that you may want to also include some images | ||
that are stored locally within your repo. | ||
This approach is recommended if you are planning to use images in a high load production and using other providers is not suitable. | ||
|
||
```vue | ||
<NuxtImg provider="static" src="/logo.png" width="300" height="200" /> | ||
### Add `ipx` dependency | ||
|
||
You'll need to ensure that `ipx` is in your production dependencies. | ||
|
||
<d-code-group> | ||
<d-code-block label="Yarn" active> | ||
|
||
```bash | ||
yarn add ipx | ||
``` | ||
|
||
</d-code-block> | ||
<d-code-block label="NPM"> | ||
|
||
```bash | ||
npm install ipx | ||
``` | ||
|
||
This will load the image in as `/static/logo.png` and apply the IPX optimizations if applicable. | ||
</d-code-block> | ||
</d-code-group> | ||
|
||
### Add `serverMiddleware` handler | ||
|
||
Finally, just add `@nuxt/image` to your `modules` (instead of `buildModules`) in `nuxt.config`. This will ensure that the `/_ipx` endpoint continues to work at runtime. | ||
|
||
|
||
### Programmatic middidleware | ||
|
||
If you have an advanced use case, you may instead add the following code to your `nuxt.config` (or create a custom server middleware file directly that handles the `/_ipx` endpoint): | ||
|
||
```js [nuxt.config.js] | ||
import path from 'path' | ||
import { createIPX, createIPXMiddleware } from 'ipx' | ||
|
||
const ipx = createIPX({ | ||
dir: path.join(__dirname, 'static'), | ||
// https://image.nuxtjs.org/api/options#domains | ||
domains: [], | ||
// Any options you need to pass to sharp | ||
sharp: {} | ||
}) | ||
|
||
export default { | ||
serverMiddleware: [ | ||
{ | ||
path: '/_ipx', | ||
handler: createIPXMiddleware(ipx) | ||
} | ||
] | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,57 @@ | ||
import type { IPXOptions } from 'ipx' | ||
import { relative, resolve } from 'upath' | ||
import { update as updaterc } from 'rc9' | ||
import { mkdirp, readFile, writeFile } from 'fs-extra' | ||
import { lt } from 'semver' | ||
|
||
export function createIPXMiddleware (ipxOptions: IPXOptions) { | ||
const { createIPX, createIPXMiddleware } = require('ipx') as typeof import('ipx') | ||
const ipx = createIPX(ipxOptions) | ||
return createIPXMiddleware(ipx) | ||
import type { ProviderSetup } from './types' | ||
|
||
export const ipxSetup: ProviderSetup = async (_providerOptions, moduleOptions, nuxt) => { | ||
const isStatic = nuxt.options.target === 'static' | ||
const runtimeDir = resolve(__dirname, 'runtime') | ||
const ipxOptions = { | ||
dir: resolve(nuxt.options.rootDir, moduleOptions.dir), | ||
domains: moduleOptions.domains, | ||
sharp: moduleOptions.sharp | ||
} | ||
|
||
// Add IPX middleware unless nuxtrc or user added a custom middleware | ||
const hasUserProvidedIPX = !!nuxt.options.serverMiddleware | ||
.find((mw: { path: string }) => mw.path && mw.path.startsWith('/_ipx')) | ||
|
||
if (!hasUserProvidedIPX) { | ||
const { createIPX, createIPXMiddleware } = await import('ipx') | ||
const ipx = createIPX(ipxOptions) | ||
nuxt.options.serverMiddleware.push({ | ||
path: '/_ipx', | ||
handle: createIPXMiddleware(ipx) | ||
}) | ||
} | ||
|
||
// Warn if unhandled /_ipx endpoint only if not using `modules` | ||
const installedInModules = nuxt.options.modules.some( | ||
(mod: string | (() => any)) => typeof mod === 'string' && mod.includes('@nuxt/image') | ||
) | ||
|
||
if (!isStatic && !hasUserProvidedIPX && !installedInModules && lt(nuxt.constructor.version, '2.16.0')) { | ||
// eslint-disable-next-line no-console | ||
console.warn('[@nuxt/image] If you would like to use the `ipx` provider at runtime.\nMake sure to follow the instructions at https://image.nuxtjs.org/providers/ipx .') | ||
} | ||
|
||
if (nuxt.options.dev || hasUserProvidedIPX) { | ||
return | ||
} | ||
|
||
// In production, add IPX module to nuxtrc (used in Nuxt 2.16+) | ||
nuxt.hook('build:done', async () => { | ||
const handler = await readFile(resolve(runtimeDir, 'ipx.js'), 'utf-8') | ||
const distDir = resolve(nuxt.options.buildDir, 'dist') | ||
const apiDir = resolve(distDir, 'api') | ||
const apiFile = resolve(apiDir, 'ipx.js') | ||
const relativeApiFile = '~~/' + relative(nuxt.options.rootDir, apiFile) | ||
|
||
await mkdirp(apiDir) | ||
await writeFile(apiFile, handler.replace(/.__IPX_OPTIONS__./, JSON.stringify(ipxOptions))) | ||
|
||
updaterc({ serverMiddleware: [{ path: '/_ipx', handler: relativeApiFile }] }, { dir: distDir, name: 'nuxtrc' }) | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { createIPX, createIPXMiddleware } from 'ipx' | ||
|
||
const ipx = createIPX('__IPX_OPTIONS__') | ||
|
||
export default createIPXMiddleware(ipx) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters