nuxt-proxy-request
v1.10.0
Published
A http proxy module for nuxt(3) powered by h3-proxy.
Downloads
1,472
Maintainers
Readme
nuxt-proxy-request
A http proxy module for nuxt(3) powered by h3-proxy .
Why use this module?
- See this issue Error when starting a Project using "http-proxy-middleware" with "npm run start" #15608.
Features
- Support for both development and production environments.
- Almost the same API as nuxt-proxy that using http-proxy-middleware, But this module using h3-proxy .
- Support Typescript.
Quick Setup
- Add
nuxt-proxy-request
dependency to your project
# Using pnpm
pnpm add -D nuxt-proxy-request
# Using yarn
yarn add --dev nuxt-proxy-request
# Using npm
npm install --save-dev nuxt-proxy-request
- Add
nuxt-proxy-request
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-proxy-request'
],
proxy: {
options: [
{
target: 'http://www.example.com',
pathFilter: ['/api/**'],
pathRewrite: {
'^/api': ''
}
}
]
}
// OR
// runtimeConfig: {
// proxy: {...}
// }
})
That's it! You can now use nuxt-proxy-request in your Nuxt app ✨
Options
| Key | Type | Default value | Description |
| :---: | :---: | :---: | :---: |
| options
| object/Array<object>
| []
| Configure which targets you want to proxy. :warning: TIPS: More config object please see h3-proxy's Options, You can pass an array of options for multiple targets or pass an object of options for single target.|
:warning: Do not when the value of a certain configuration item is a function type :warning:
Do not use
runtimeConfig.proxy
for configuration, as the function type value in theruntimeConfig
object will be ignored. Please useproxy
for configuration as it has undergone special processing on the internal implementation.Do not use any external variables within the function body.
import foo from 'foo'
export default defineNuxtConfig({
modules: [
'nuxt-proxy-request'
],
proxy: {
options: [
{
target: 'http://www.example.com',
pathFilter: function(path, req) {
console.log(foo) /* At runtime, foo is undefined. */
return path.match(/^\/api/) && req.method === 'GET';
},
pathRewrite: {
'^/api': ''
}
}
]
}
})
Do not use RegExp literal, using
new RegExp()
instead, in function body.Do not use Single-Line Comments, using Multiple-Line Comments instead, in function body.
If the above points cause you trouble. You can use
h3-proxy
directly. See how to use h3-proxy in Nuxt3 Project.
Development
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release