nuxt-umami

Nuxt Umami Module

Features

• SSR support
• TypeScript & JSDocs
• Feature complete
• The <script setup> syntax

Installation

With pnpm

  pnpm add nuxt-umami

Or, with npm

  npm install nuxt-umami

Or, with yarn

  yarn add nuxt-umami

Configuration

Add the module to nuxt.config:

{
  modules: [
    ['nuxt-umami'],
  ],
  umami: {
    autoTrack: true,
    doNotTrack: false,
    cache: false,
    domains: 'mywebsite.com,mywebsite2.com',
    websiteId: 'your-website-id',
    scriptUrl: 'https://path.to.umami.js',
  }
}

Only websiteId and scriptUrl are mandatory. See the Umami docs for more explanation of these options.

Usage

You can use $umami anywhere you have access to NuxtApp or the useNuxtApp composable (middleware, asyncData, etc).

Note: $umami is only available onMounted.

In <script setup>

<script setup>
const { $umami } = useNuxtApp();

onMounted(() => {
  // Sends an event with an event type of custom.
  $umami('Signup button click')
});
</script>

In middleware, asyncData, etc

const { data } = await useAsyncData(
  'mountains',
  (nuxtApp) => {
    const { $umami } = useNuxtApp();
    // do something, return something
  },
);

Credits

• VueUse - for useScriptTag composable.
• Joe Pritchard - author of the nuxt-umami-module for Nuxt 2.