Nuxt LogRocket

Session replays, product analytics and more for Nuxt apps.

📖 Release Notes

Features

• Nuxt 3 & Nuxt Bridge
• Supports Pinia integration
• Ability to run in development mode

Setup

• Add nuxt-logrocket dependency to your project

npm i nuxt-logrocket

• Add nuxt-logrocket to the modules section of your nuxt.config.ts file

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-logrocket'],

  logRocket: {
    id: '',
    dev: false,
    config: {
      //
    }
  }
})

Options

Options can be passed using either Runtime Config or the logRocket section in nuxt.config.ts. Setting a value for the required id option is enough in most cases.

Below is the complete list of options:

Option	Type	Default	Required
id	String	''	True
dev	Boolean	true	False
enablePinia	Boolean	true	False
release	String	null	False
consoleEnabled	Boolean	true	False
networkEnabled	Boolean	true	False
networkRequestSanitizer	Function	-	False
networkResponseSanitizer	Function	-	False
domEnabled	Boolean	true	False
inputSanitizer	Boolean	false	False
textSanitizer	Boolean	false	False
baseHref	String	null	False
shouldCaptureIP	Boolean	true	False
rootHostname	String	null	False
shouldDebugLog	Boolean	true	False
mergeIframes	Boolean	false	False

This is an example containing the default values for the options:

{
  id: '',
  dev: true,
  enablePinia: true,
  config: {
    release: null,
    console: {
      isEnabled: true
    },
    network: {
      isEnabled: true,
      networkRequestSanitizer: () => {},
      networkResponseSanitizer: () => {}
    },
    dom: {
      isEnabled: true,
      inputSanitizer: false,
      textSanitizer: false,
      baseHref: null
    },
    shouldCaptureIP: true,
    rootHostname: null,
    shouldDebugLog: true,
    mergeIframes: false
  }
}

Usage

LogRocket gets automatically injected into your application when it is setup correctly. By default this module works only in production and on client-side events.

In order to use LogRocket's injected functionality in your application, you can use :

const { $logRocket } = useNuxtApp()

Visit LogRocket's website for a full list of features : Docs

Pinia

This module automatically detects Pinia store mutations and attaches them to the LogRocket session.

This functionality is enabled by default, and can be disabled by setting the enablePinia options to false.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-logrocket'],

  logRocket: {
    id: '',
    enablePinia: false
  }
})

Development

• Clone this repository
• Install dependencies using yarn install
• Start development server using yarn run dev
• Point your browser to http://localhost:3000

License

MIT License - Alibaba Travels Co