Nuxt Umami

Overview

The Nuxt Umami is an open-source package that allows users to integrate Umami Analytics into their Nuxt websites or applications. It comes with several features such as SSR (Server Side Rendering) support, no loading delay, simple and extensive configuration, TypeScript support, easy debugging, and compatibility with Nuxt 3.

Features

• Open Source: The Nuxt Umami package is open-source, allowing users to view and modify the source code as needed.
• SSR Support: The package supports Server Side Rendering, ensuring optimal performance for websites and applications.
• No Loading Delay: With Nuxt Umami, there is no loading delay as it is designed for instant availability.
• Ad and Script Blockers: The package is designed to escape most ad and script blockers, ensuring accurate analytics tracking.
• Simple Configuration: Nuxt Umami provides a simple and feature-complete configuration system, allowing users to customize the analytics setup as needed.
• TypeScript and JSDocs Support: The package supports TypeScript and JSDocs, providing auto completion and a smooth development experience.
• Easy Debugging: Nuxt Umami makes debugging easy with its simple console logging feature.
• Auto Imported: The package is automatically imported and available almost everywhere, making it convenient to implement.

Installation

Here is a step-by-step guide to installing the Nuxt Umami package:

Step 1: Install and add to Nuxt

Install the package using your preferred package manager:

npm install nuxt-umami

Then, add “nuxt-umami” to the extends array in your nuxt.config.js file:

export default {
  extends: [
    // Other extends
    'nuxt-umami',
  ],
  // Other Nuxt config options
}

Alternatively, you can skip the installation process and manually configure Umami.

Step 2: Configure Umami

You can provide configuration options using the app.config.ts file or the appConfig property of the Nuxt config.ts file (recommended for readability and ease of update).

If you have environment variables available, you can use them to provide the host and id configuration options. Simply add NUXT_PUBLIC_UMAMI_HOST and NUXT_PUBLIC_UMAMI_ID to your .env file.

The available configuration options are:

• host (string, required): Your Umami endpoint where the script is hosted.
• id (string, required): Unique website ID provided by Umami.
• domains (string or Array<string>, optional): Limit tracker to specific domains by providing an array or comma-separated list (without ‘http’). Leave blank for all domains.
• ignoreDnt (boolean, optional): Option to ignore browsers’ Do Not Track setting. Default is true.
• autoTrack (boolean, optional): Option to automatically track page views. Default is true.
• ignoreLocalhost (boolean, optional): Option to prevent tracking on localhost. Default is false.
• customEndpoint (string, optional): Set a custom COLLECT_API_ENDPOINT. See the documentation for more details.

Note: Some options may require a specific version of Nuxt Umami.

Summary

The Nuxt Umami package provides an easy and convenient way to integrate Umami Analytics into Nuxt websites or applications. It offers features such as SSR support, no loading delay, ad and script blocker escape, simple configuration, TypeScript support, and easy debugging. By following the installation and configuration steps, users can quickly set up Umami Analytics and track their website or application’s analytics effectively.