Installation

How to install Nuxt Umami in your app.

Install the module with nuxi:

pnpm
npm
bun
pnpx nuxi@latest module add nuxt-umami

Alternatively, install and add to Nuxt manually:

pnpm
npm
bun
pnpm add nuxt-umami

Add to Nuxt:

nuxt.config.ts 
export default defineNuxtConfig({
  modules: ['nuxt-umami'],
});

Configure Umami

nuxt.config.ts 
export default defineNuxtConfig({
  modules: ['nuxt-umami'],

  umami: {
    id: 'my-w3b517e-id',
    host: 'https://my-umami.xyz',
    autoTrack: true,
    // proxy: 'cloak',
    // useDirective: true,
    // ignoreLocalhost: true,
    // excludeQueryParams: false,
    // domains: ['cool-site.app', 'my-space.site'],
    // customEndpoint: '/my-custom-endpoint',
    // enabled: false,
    // logErrors: true,
  },
});

Start sending

example.vue 
<script setup lang="ts">
function onAction() {
  umIdentify({ campaign: 'twix-trial' });
  umTrackEvent('signup', { prop: 123, otherProp: 'anything', isBool: true });
}

onMounted(() => {
  umTrackView();
});
</script>

<template>
  <button @click="umTrackEvent('button-1')">
    Button 1
  </button>

  <button @click="onAction">
    Button 2
  </button>
</template>
Introduction
Integrates Umami Analytics into your Nuxt apps.
Configuration
Configure Nuxt Umami to work with your app.