Nuxt Application Logging Integration

LogTide’s Nuxt module provides zero-config structured logging for Nuxt applications with automatic server and client initialization, runtime config injection, and Vue composables.

Why use LogTide with Nuxt?

• Zero-config: Add module to nuxt.config.ts and it works
• Runtime config: DSN injected via Nuxt runtime config, overridable at deploy time
• Server + client: Auto-initializes on both sides
• Composable API: useLogtide() composable for Vue components
• Error capture: Automatic on server and client

Prerequisites

• Nuxt 3.x
• Node.js 18+
• LogTide instance with a DSN

Installation

npm install @logtide/nuxt

Quick Start

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

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

That’s all you need. The module handles initialization, error capture, and provides composables.

Configuration

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

  logtide: {
    dsn: process.env.LOGTIDE_DSN,
    // Or, instead of a dsn:
    // apiUrl: process.env.LOGTIDE_API_URL,
    // apiKey: process.env.LOGTIDE_API_KEY,

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

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

The same configuration is applied to both the server (Nitro) and the client (Vue) — there is no separate client/server toggle.

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 });

  const user = await getUserById(id);
  return user;
});

Client-Side Usage

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

const logtide = useLogtide();

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

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

Environment Variables

Override configuration at deploy time:

LOGTIDE_DSN=https://[email protected]
NUXT_PUBLIC_LOGTIDE_DSN=https://[email protected]

Next Steps

• JavaScript SDK - Core SDK reference
• Nuxt SDK Reference - Full API documentation
• Docker Integration - Container deployments