@dansmaculotte/nuxt-segment NPM

nuxt-segment

Nuxt.js module for Segment Analytics

This module uses vue-segment to add Segment Analytics to a Nuxt.js app.

Setup

Add @dansmaculotte/nuxt-segment dependency using yarn or npm to your project
Add @dansmaculotte/nuxt-segment to modules section of nuxt.config.js

Configure it:

{
  modules: [
    // Simple usage
    '@dansmaculotte/nuxt-segment',

    // With options
    [
      '@dansmaculotte/nuxt-segment',
      { /* module options */ }
    ],
  ],

  // Or with global options
  segment: {
    writeKey: '',
    disabled: false,
    useRouter: true
  }

  // Or with publicRuntimeConfig

  publicRuntimeConfig: {
    SEGMENT_WRITE_KEY: process.env.SEGMENT_WRITE_KEY_FROM_SERVER || '',
    SEGMENT_DISABLED: process.env.SEGMENT_DISBLED_FROM_SERVER || false,
    SEGMENT_USE_ROUTER: process.env.SEGMENT_USE_ROUTER_FROM_SERVER || true,
  }
}

Options

writeKey

Type: String
- Default: process.env.SEGMENT_WRITE_KEY || publicRuntimeConfig.SEGMENT_WRITE_KEY

disabled

Type: Boolean
- Default: process.env.SEGMENT_DISABLED || publicRuntimeConfig.SEGMENT_DISABLED || false

useRouter

Type: Boolean
- Default: process.env.SEGMENT_USE_ROUTER || publicRuntimeConfig.SEGMENT_USE_ROUTER || true

Usage

Inside a Vue component, the Segment analytics object is available as this.$segment:

export default {
  mounted () {
    this.$segment.identify('f4ca124298', {
      name: 'Michael Bolton',
      email: 'mbolton@initech.com'
    });
    this.$segment.track('Signed Up', { plan: 'Enterprise' });
    this.$segment.page('Pricing');
  }
}

$segment is also injected into the Nuxt context so you can access it within your Vuex stores:

export default {
  LOGOUT({ dispatch }) {
    return this.$auth.logout()
      .then(() => {
        this.$segment.reset();
        return dispatch('AFTER_LOGOUT');
      })
  }
}