Using Nuxt routeRules as a reverse proxy

Last updated: Feb 21, 2024

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

Questions?

Was this page useful?

Product analytics for browser extensions

Do you have a Firefox or Chrome browser plugin with a user interface and want to understand how it's being used? PostHog is the perfect way to do just that. Setup for Firefox & Chrome plugins Installing PostHog inside your plugin Open the HTML file used in your default_popup and add the PostHog array.js script. To do this you'll need to either: Copy the latest version of array.js from: https://app.posthog.com/static/array.js and import it locally using <script src="array.js" /> before…