Nuxt SDK

@logtide/nuxt is a zero-config Nuxt module that auto-initializes LogTide on both server and client. It includes automatic Core Web Vitals collection, click breadcrumbs, 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 --apiKey YOUR_API_KEY

Core Web Vitals

The Nuxt module automatically enables the WebVitalsIntegration on the client side. Metrics like LCP, FID, and CLS are sent to LogTide automatically.

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',

    // Client-side DSN (if different from server)
    clientDsn: process.env.NUXT_PUBLIC_LOGTIDE_DSN,

    // Enable/disable client-side capture (default: true)
    clientEnabled: true,

    // Enable/disable server-side capture (default: true)
    serverEnabled: true,

    // 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({
      category: 'ui',
      message: 'Form submitted',
    });

    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
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.