The Problem

Umami is a simple, privacy-first analytics solution. The privacy and promise of data ownership appealed to me over popular services like Google Analytics.

Developers can self-host their Umami instance or use the Umami Cloud, which is free for up to 10K monthly events. That's what I decided to use so I can focus on building.

Fortunately, Nuxt already offers an Umami Module. Unfortunately, I got turned around in the configuration and experienced two types of errors:

• A CORS error that prevented my events from being sent to the cloud.
• No CORS error, an apparently successful request to the cloud API, but no data showing up in my report.

These were both caused by (different) configuration errors.

The Solution

The installation guide outlines a few paths. Here's the route that worked for me:

npm install nuxt-umami

Update your nuxt.config file:

defineNuxtConfig({
  ...
  extends: ['nuxt-umami']
});

Create or update app.config.ts:

export default defineAppConfig({
  umami: {
    version: 2,
  },
});

The default version value is 1. This was giving me CORS issues with Umami Cloud. Explicitly set it to 2.

I set the host and id params in my .env file but they could also be defined here if you prefer. Specifically, my final step was:

NUXT_PUBLIC_UMAMI_HOST="https://us.umami.is/script.js"
NUXT_PUBLIC_UMAMI_ID="MY_ID"

To find your public ID, log in to your Umami Cloud. Add the website you want, or click Edit if it already exists. The "Website ID" is listed on the details tab. Copy it from there.

To find the NUXT_PUBLIC_UMAMI_HOST value to use, go to the Tracking code tab. The URL you want is the src attribute in the provided script tag. This was the other source of my errors: I had to use https://us.umami.is/script.js instead of various other values I saw online.

Verifying and debugging

With these configured, you can ignore the script tag on that page since the module will take care of that for you. It should work locally and after you deploy! You can check your network tab for calls to /send or /collect to check if the status is 200 OK. Of course, check your Umami Cloud page to make sure data is coming in. Once it was configured correctly, this was immediate for me.

If your analytics don't seem to be working once deployed, make sure you've set the environment variables there, too. I use Netlify's UI for mine. If you change them, re-deploy so the build process uses the new values.

I hope that helps! Feel free to reach out--I'm no expert, but maybe I ran into a similar issue along the way.