Using Nuxt routeRules as a reverse proxy

Last updated:

|Edit this page

Note: If you are using the EU cloud then use eu instead of us in all domains (e.g. us.i.posthog.com -> eu.i.posthog.com)

Nuxt 3 uses Nitro under the hood, which provides the routeRules config that can be used to proxy requests from one route to another.

To do this, add the following routeRules to your nuxt.config.ts file:

JavaScript
// nuxt.config.ts
export default defineNuxtConfig({
    routeRules: {
        '/ingest/static/**': { proxy: 'https://us-assets.i.posthog.com/static/**' },
        '/ingest/**': { proxy: 'https://us.i.posthog.com/**' },
    },
});

Then configure the PostHog client to send requests via your new proxy:

JavaScript
const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
    api_host: 'https://your-host.com/ingest',
    ui_host: '<ph_app_host>',
});

Questions?

Was this page useful?

Next article

Using Remix API routes as a reverse proxy

If you are using Remix, you can use API routes to set up a reverse proxy. Create a file ingest.$.tsx in the routes folder. In this file, set up code to match requests to a custom route, set a new host header, change the URL to point to PostHog, and rewrite the response. Once done, configure the PostHog client to send requests via your rewrite.

Read next article