Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yisibell/nuxt-proxy-request
A http proxy module for nuxt(3) powered by h3-proxy.
https://github.com/yisibell/nuxt-proxy-request
h3 h3-proxy http http-proxy middleware nitro nuxt nuxt-module nuxt3
Last synced: 8 days ago
JSON representation
A http proxy module for nuxt(3) powered by h3-proxy.
- Host: GitHub
- URL: https://github.com/yisibell/nuxt-proxy-request
- Owner: yisibell
- Created: 2023-03-16T06:13:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-28T06:27:34.000Z (7 months ago)
- Last Synced: 2024-09-21T18:55:53.044Z (about 2 months ago)
- Topics: h3, h3-proxy, http, http-proxy, middleware, nitro, nuxt, nuxt-module, nuxt3
- Language: TypeScript
- Homepage:
- Size: 1.03 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# nuxt-proxy-request
A http proxy module for nuxt(3) powered by h3-proxy .
- [✨ Release Notes](/CHANGELOG.md)
## Why use this module?
- See this issue [Error when starting a Project using "http-proxy-middleware" with "npm run start" #15608](https://github.com/nuxt/nuxt/issues/15608).
## Features
- Support for both **development** and **production** environments.
- Almost the same API as [nuxt-proxy](https://github.com/wobsoriano/nuxt-proxy) that using [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), But this module using h3-proxy .
- Support **Typescript**.
## Quick Setup
1. Add `nuxt-proxy-request` dependency to your project
```bash
# 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
```
2. Add `nuxt-proxy-request` to the `modules` section of `nuxt.config.ts`
```js
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` | `[]` | Configure which targets you want to proxy. :warning: TIPS: More **config object** please see [h3-proxy's Options](https://github.com/yisibell/h3-proxy#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:
1. Do not use `runtimeConfig.proxy` for configuration, as the function type value in the `runtimeConfig` object will be ignored. Please use `proxy` for configuration as it has undergone special processing on the internal implementation.
2. Do not use any external variables within the function body.
```ts
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': ''
}
}
]
}
})
```
3. Do not use **RegExp** literal, using `new RegExp()` instead, in function body.
4. 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](https://github.com/yisibell/h3-proxy#nuxt).
## Development
```bash
# 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
```