Join the Nuxt Team at Frontend Nation 4-7 June.

logrocket
logrocket

LogRocket module for Nuxt to help you fix bugs and understand user behaviour.

nuxt-logrocket

nuxt-logrocket

npm (scoped with tag)npmCircleCICodecovjs-standard-style

LogRocket module for Nuxt.js

📖 Release Notes

Features

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

Setup

  • Add nuxt-logrocket dependency using yarn or npm to your project
yarn add nuxt-logrocket

OR

npm install nuxt-logrocket --save
  • 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:

OptionTypeDefaultRequired
idString''True
devBooleantrueFalse
enablePiniaBooleantrueFalse
releaseStringnullFalse
consoleEnabledBooleantrueFalse
networkEnabledBooleantrueFalse
networkRequestSanitizerFunction-False
networkResponseSanitizerFunction-False
domEnabledBooleantrueFalse
inputSanitizerBooleanfalseFalse
textSanitizerBooleanfalseFalse
baseHrefStringnullFalse
shouldCaptureIPBooleantrueFalse
rootHostnameStringnullFalse
shouldDebugLogBooleantrueFalse
mergeIframesBooleanfalseFalse

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