Nuxt Proxy Middleware

Common errors

Warnings

Install

Imports

• Module Activation

  export default defineNuxtConfig({
    modules: [
      'nuxt-proxy'
    ],
    // ...
  })

  nuxt-proxy is activated by adding its name to the `modules` array in `nuxt.config.ts`. No direct JavaScript import statements are typically used in components or server routes for this module.

• Proxy Configuration

  export default defineNuxtConfig({
    proxy: {
      options: {
        target: 'https://jsonplaceholder.typicode.com',
        changeOrigin: true
      }
    }
  })

  Proxy rules are configured via the `proxy` property within `defineNuxtConfig`. This object directly maps to the options of `http-proxy-middleware`.

• Runtime Configuration Overrides

  export default defineNuxtConfig({
    runtimeConfig: {
      proxy: {
        options: { target: process.env.NUXT_PROXY_OVERRIDE_TARGET ?? 'https://jsonplaceholder.typicode.com' }
      }
    }
  })

  Proxy options can be overridden at runtime using the `runtimeConfig.proxy` property in `nuxt.config.ts` or via environment variables (e.g., `NUXT_PROXY_OPTIONS_TARGET`). `process.env` access is typical for fetching runtime values.

Quickstart

Demonstrates how to enable `nuxt-proxy` as a module, configure basic proxy rules in `nuxt.config.ts` including `target`, `pathRewrite`, and `pathFilter`, and show how client-side `useFetch` interacts with the proxied endpoints. It also includes an example of runtime configuration.

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: [
    'nuxt-proxy'
  ],
  proxy: {
    options: {
      target: process.env.NUXT_PROXY_TARGET ?? 'https://jsonplaceholder.typicode.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api/todos': '/todos',
        '^/api/users': '/users'
      },
      pathFilter: [
        '/api/todos',
        '/api/users'
      ]
    }
  },
  // Example of using runtimeConfig for proxy options
  runtimeConfig: {
    proxy: {
      options: {
        target: process.env.NUXT_RUNTIME_PROXY_TARGET ?? 'https://jsonplaceholder.typicode.com'
      }
    }
  }
});

// In a Vue component or server route (e.g., pages/index.vue)
// <script setup>
// const { data: todos } = await useFetch('/api/todos');
// console.log('Fetched Todos:', todos.value);
// const { data: users } = await useFetch('/api/users');
// console.log('Fetched Users:', users.value);
// </script>