Configuration

Add umami to your Nuxt config.

Finding Config Options

Config options host and id can be extracted from the tracking code Umami provides. src and data-website-id in the <script> tag map to host and id respectively.

This is the case for both Umami Cloud and self-hosted instances.

Environment Variables

You can provide the host and id as env variables. Simply add NUXT_UMAMI_HOST and NUXT_UMAMI_ID to your .env file.

Config Options

Proxy Mode

Nuxt Umami can leverage Nitro route rules and Nuxt server endpoints to proxy requests to your Umami endpoint.

There are currently 3 proxy options:

• false: Requests go directly to your Umami endpoint.
• direct: Simple proxy using route rules.
• cloak: Proxy with "sensitive" data kept out of your client bundle.

With cloak, your website id and host are only available server-side unlike direct or none.

Umami Tag

From the official docs, you can use Umami Tags for

• A/B Testing: Test different versions of a webpage or campaign to see which performs better.
• Group events to allow filtering and insights under a single website overview.

Nuxt Umami provides 3 ways to set tags. Whichever method you choose is entirely up to you and your use case (from lowest to highest priority):

• directly in nuxt.config.ts
  nuxt.config.ts

  export default defineNuxtConfig({
    umami: {
      ...others,
      tag: 'design-g7'
    },
  });
  

• env variable NUXT_UMAMI_TAG
  .env

  NUXT_UMAMI_TAG="variation-25"
  

• umami.tag client-side in localStorage.

  If umami.tag exists in localStorage, Nuxt Umami will use it. Nuxt Umami does not handle setting this value.

Config Type