Vue and Nuxt

The JavaScript SDK has optional Vue and Nuxt adapters from version 0.12.0, which exports /vue, /nuxt/client and /nuxt/server.

Earlier versions, up to 0.11.4, do not have these adapters: install @bussolabs/closeyourit-js@^0.12.0 before using the recipe below.

What is covered

• Browser errors from Nuxt's vue:error and app:error hooks.
• Successful navigation breadcrumbs, using route templates rather than actual parameters.
• Nitro errors, with a separate context for each request.
• Handler duration and correlated logs when you explicitly wrap a server handler.

These adapters do not create OpenTelemetry spans. See OpenTelemetry for that separate server-side path. Navigation breadcrumbs are not page-view analytics.

Browser plugin

Declare the five public settings below in runtimeConfig.public. Only the public key belongs there. In Nuxt 4, create app/plugins/monitoring.client.ts; in Nuxt 3, use your configured source directory.

import { init } from '@bussolabs/closeyourit-js'
import { instrumentNuxtClient } from '@bussolabs/closeyourit-js/nuxt/client'

export default defineNuxtPlugin((app) => {
  const config = useRuntimeConfig()
  const client = init({
    endpointUrl: config.public.monitoringEndpoint,
    projectId: config.public.monitoringProject,
    publicKey: config.public.monitoringPublicKey,
    environment: config.public.applicationEnvironment,
    release: config.public.applicationVersion,
    autoInstall: false,
  })
  const monitoring = instrumentNuxtClient(app.hooks, client, useRouter())
  app.vueApp.onUnmount(monitoring.uninstall)
})

The adapter keeps Nuxt's own error handling. Expected redirects and client errors with status 300–499 are excluded. Use one client for any additional global capture to avoid duplicate reporting.

Nitro server

This entry requires Node and Nitro 2. It is not an Edge integration. Keep the bearer token in the server runtime environment, outside runtimeConfig.public and build configuration.

Create server/utils/monitoring.ts:

import { getClient, init } from '@bussolabs/closeyourit-js'
import { createNitroInstrumentation } from '@bussolabs/closeyourit-js/nuxt/server'

export function getMonitoring() {
  const client = getClient() ?? init({
    endpointUrl: process.env.CLOSEYOURIT_ENDPOINT_URL,
    projectId: process.env.CLOSEYOURIT_PROJECT_ID,
    token: process.env.CLOSEYOURIT_TOKEN,
    environment: process.env.NODE_ENV,
    release: process.env.APP_VERSION,
    autoInstall: false,
  })
  return createNitroInstrumentation(client)
}

Install the hooks at server startup in server/plugins/monitoring.ts:

import { getMonitoring } from '../utils/monitoring'

export default defineNitroPlugin((app) => {
  const monitoring = getMonitoring()
  monitoring.install(app.hooks)
  app.hooks.hook('close', () => monitoring.uninstall())
})

Keep the SDK external in the existing nitro configuration so its entries share the same client: externals: { external: ['@bussolabs/closeyourit-js'] }.

Wrap handlers that need correlated logs or duration. For server/api/items/[id].ts:

import { getMonitoring } from '../../utils/monitoring'

export default defineEventHandler((event) =>
  getMonitoring().withRequest(event, '/api/items/:id', async () => {
    return { ok: true }
  }),
)

Use a static route template, never a URL containing user values. The wrapper measures handler completion, not the time needed to send a whole stream. Hooks alone do not measure all server rendering. For Vue errors handled during server rendering, forward vue:error from a server-only Nuxt plugin to app.ssrContext?.event.captureError(error, { tags: ['vue'] }).

Check and remove

Send one deliberate test error from the browser and one from the server. Confirm both are stored in the intended project, with the right release and no private values. A successful send or build alone does not prove storage.

uninstall() removes only the adapter's hooks. The application still owns its client and must flush/close it during its own shutdown. Remove the plugins to disable collection on the next start.

Version 0.12.0 has construction checks for Nuxt 3.21.11 and 4.5.2, Vue 3.5.43, Nitro 2.13.4, on Node 24.21.0 and 26.9.0. Those exact checks do not certify every intermediate version, browser delivery or production activation.