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: 'https://us.posthog.com', // or https://eu.posthog.com if your PostHog is hosted in Europe
});

Questions?

Was this page useful?

Next article

Using Vercel rewrites as a reverse proxy

Vercel supports rewrites which we can use as a reverse proxy. Create a vercel.json file and add a rewrites object from the /ingest route. Some frameworks, like SvelteKit and Astro , require a hungrier regex pattern like: Note: Some frameworks, like T3 app, don't support Vercel rewrites well. If neither of these options work, we recommend trying another proxy method. Once done, set the /ingest route of your domain as the API host in your PostHog initialization like this: Once…

Read next article