nuxt-logrocket-social-card

Nuxt LogRocket

Session replays, product analytics and more for Nuxt apps.

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

nuxt-modules / logrocket

readme