Using Nuxt routeRules as a reverse proxy

Warning

The following self-hosted proxy isn't provided by PostHog, so we can't take responsibility for it! If unsure, we recommend using our managed reverse proxy.
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).
Avoid using generic or common path names like /analytics, /tracking, /ingest, or /posthog for your reverse proxy. They will most likely be blocked. Instead, use a non-obvious path name or something random and unique to your application that's unlikely to appear in a filter list.

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: {
        '/<ph_proxy_path>/static/**': { proxy: 'https://us-assets.i.posthog.com/static/**' },
        '/<ph_proxy_path>/**': { 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/<ph_proxy_path>',
    ui_host: '<ph_app_host>',
});

Using Nuxt routeRules as a reverse proxy

Community questions

Was this page useful?