refactor: move ipx to runtime servermiddleware

docs/content/en/4.providers/ipx.md

@@ -22,3 +22,53 @@ that are stored locally within your repo.
 ```
 
 This will load the image in as `/static/logo.png` and apply the IPX optimizations if applicable.
+
+
+### Using `ipx` in production
+
+#### 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
+```
+
+  </d-code-block>
+</d-code-group>
+
+#### Add `serverMiddleware` handler
+
+You will also need to add `@nuxt/image` to your _modules_ (instead of buildModules) or add the following code to your `nuxt.config`:
+
+```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)
+    }
+  ]
+}
+```

src/module.ts

@@ -1,10 +1,8 @@
-import { resolve } from 'upath'
-
+import { relative, resolve } from 'upath'
 import type { Module } from '@nuxt/types'
 import defu from 'defu'
 
 import { setupStaticGeneration } from './generate'
-import { createIPXMiddleware } from './ipx'
 import { resolveProviders, detectProvider } from './provider'
 import type { ModuleOptions, CreateImageOptions } from './types'
 import { pick, pkg } from './utils'
@@ -73,14 +71,37 @@ const imageModule: Module<ModuleOptions> = async function imageModule (moduleOpt
     }
   })
 
-  addServerMiddleware({
-    path: '/_ipx',
-    handle: createIPXMiddleware({
-      dir: options.dir,
+  // Only add IPX server middleware if the static/ipx provider is used
+  if (
+    (options.provider === 'static' && nuxt.options.dev) ||
+    options.provider === 'ipx' ||
+    Object.keys(options.providers).includes('ipx')
+  ) {
+    const rootDir = nuxt.options.rootDir
+    const ipxOptions = {
+      dir: relative(rootDir, options.dir),
       domains: options.domains,
       sharp: options.sharp
-    })
-  })
+    }
+
+    // In development, add IPX middleware directly
+
+    const hasUserProvidedMiddleware = !!nuxt.options.serverMiddleware.find((mw: { path: string }) => mw.path && mw.path.startsWith('/_ipx'))
+
+    if (!hasUserProvidedMiddleware) {
+      const { createIPX, createIPXMiddleware } = await import('ipx')
+
+      const ipx = createIPX(ipxOptions)
+      addServerMiddleware({
+        path: '/_ipx',
+        handle: createIPXMiddleware(ipx)
+      })
+    }
+
+    if (nuxt.options.dev && options.provider === 'ipx' && !hasUserProvidedMiddleware) {
+      console.warn('If you would like to use the `ipx` provider at runtime, make sure to follow the instructions at https://image.nuxtjs.org/providers/ipx.')
+    }
+  }
 
   // transform asset urls that pass to `src` attribute on image components
   nuxt.options.build.loaders = defu({

src/runtime/ipx.ts

@@ -0,0 +1,5 @@
+import { createIPX, createIPXMiddleware } from 'ipx'
+
+const ipx = createIPX('__IPX_OPTIONS__')
+
+export default createIPXMiddleware(ipx)