Nuxt SDK

@logtide/nuxt is a zero-config Nuxt module that auto-initializes LogTide on both server and client. It includes click and network breadcrumbs, offline buffering, and session tracking.

Installation

npm install @logtide/nuxt

Quick Start

Add the module to your nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@logtide/nuxt'],

  logtide: {
    dsn: process.env.LOGTIDE_DSN,
    service: 'nuxt-app',
    environment: process.env.NODE_ENV,
    release: '1.0.0',
  },
});

Source Maps (CLI)

To see original source code in your stack traces, upload your source maps after the build. Nuxt generates source maps in the .nuxt/dist/client directory.

# Install the CLI
npm install -g @logtide/cli

# Upload source maps
logtide sourcemaps upload --path ./.nuxt/dist/client --release 1.0.0 --api-key YOUR_API_KEY

Core Web Vitals

The Nuxt client plugin enables the WebVitalsIntegration only when browser.webVitals is true in the public runtime config (opt-in, off by default; requires the optional web-vitals package). It reports LCP, INP, and CLS.

Session Tracking

LogTide correlates all client-side events using a persistent session_id. This allows you to view the full timeline of user actions leading up to a server-side or client-side error.

That's it. The module automatically initializes LogTide on both server and client, captures errors, and provides composables for logging.

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@logtide/nuxt'],

  logtide: {
    // Required
    dsn: process.env.LOGTIDE_DSN,

    // Recommended
    service: 'nuxt-app',
    environment: process.env.NODE_ENV,
    release: '1.0.0',

    // Tracing
    tracesSampleRate: 1.0,
  },
});

Server-Side Usage

// server/api/users/[id].get.ts
import { hub } from '@logtide/core';

export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');

  hub.captureLog('info', 'Fetching user', { userId: id });

  try {
    const user = await getUserById(id);
    return user;
  } catch (error) {
    hub.captureError(error, { userId: id });
    throw createError({ statusCode: 500, message: 'Failed to fetch user' });
  }
});

Client-Side Usage

<script setup>
import { useLogtide } from '#imports';

const logtide = useLogtide();

async function handleSubmit() {
  try {
    logtide.addBreadcrumb({
      type: 'ui',
      category: 'ui',
      message: 'Form submitted',
      timestamp: Date.now(),
    });

    await $fetch('/api/submit', { method: 'POST', body: formData });
    logtide.captureLog('info', 'Form submitted successfully');
  } catch (error) {
    logtide.captureError(error);
  }
}
</script>

Runtime Config

The module injects configuration via Nuxt runtime config, so you can override settings with environment variables at deploy time:

# .env
NUXT_LOGTIDE_DSN=https://[email protected]
NUXT_PUBLIC_LOGTIDE_DSN=https://[email protected]

API Reference

Export	Description
`@logtide/nuxt` (module)	Nuxt module - auto-initializes server + client
`useLogtide()`	Composable - access LogTide client in components
`logtide` config key	nuxt.config.ts configuration key

See the JavaScript SDK core docs for the full @logtide/core API.