Registry / crm-productivity / vue-segment-analytics

vue-segment-analytics

library0.5.4jsnpmunverified

This package is a Vue plugin for integrating Segment's `analytics.js` into Vue 2 applications. It provides a `Vue.use()` interface to initialize Segment with a write key (`id`) and can integrate with Vue Router for automatic page tracking. The current stable version is 0.5.4, with the last update in June 2022, indicating an infrequent release cadence focused on maintenance rather than active feature development. Its primary differentiator is its direct plugin integration for Vue 2, making Segment methods available globally via `this.$segment`. However, for modern Vue 3 applications, the official Segment recommendation is `@segment/analytics-vue`, making this package a legacy solution for existing Vue 2 projects.

crm-productivity

npm install vue-segment-analytics

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SEGMENT-ANALYT

vue-segment-analytics

crm-productivityjavascriptv0.5.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue

✓ import Vue from 'vue'

✗ import { Vue } from 'vue'

Vue 2 uses a default export for the Vue constructor. Named imports are incorrect for the main Vue object.

VueSegmentAnalytics

✓ import VueSegmentAnalytics from 'vue-segment-analytics'

✗ const VueSegmentAnalytics = require('vue-segment-analytics')

The library is primarily designed for ESM environments, though transpilation might allow CJS. Stick to ESM for modern Vue 2 builds.

$segment

✓ this.$segment.track('Event Name', { property: 'value' })

✗ Segment.track('Event Name')

After installation with `Vue.use()`, Segment methods are exposed on the Vue instance via `this.$segment` in components.

This quickstart demonstrates how to install and initialize `vue-segment-analytics` with a Vue 2 application, including optional router integration for automatic page tracking and a basic example of manually tracking an event.

import Vue from 'vue'; import VueRouter from 'vue-router'; import VueSegmentAnalytics from 'vue-segment-analytics'; Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: '/', component: { template: '<div>Home</div>' } }] }); Vue.use(VueSegmentAnalytics, { id: process.env.SEGMENT_WRITE_KEY ?? 'YOUR_SEGMENT_WRITE_KEY', router: router, // Optional: Pass Vue Router instance for automatic page tracking debug: process.env.NODE_ENV !== 'production' }); new Vue({ router, el: '#app', template: ` <div> <h1>Welcome</h1> <button @click="trackClick">Track Me</button> <router-view></router-view> </div> `, methods: { trackClick() { this.$segment.track('Button Clicked', { buttonName: 'Track Me' }); console.log('Segment event tracked: Button Clicked'); } }, mounted() { this.$segment.page('Home Page View', { path: '/' }); console.log('Segment event tracked: Home Page View'); } });

Debug

Known issues

breakingThis package is specifically built for Vue 2 applications. It is not compatible with Vue 3 due to fundamental changes in Vue's API and plugin system.

fix

For Vue 3 projects, use the official `@segment/analytics-vue` package provided by Segment. For existing Vue 2 projects, ensure your Vue version matches the `^2.0.0` requirement.

affects: All versions

deprecatedThe official Segment recommendation for modern Vue projects (especially Vue 3) is to use the `@segment/analytics-vue` package. This `vue-segment-analytics` package is considered a legacy solution primarily for existing Vue 2 applications.

fix

For new projects or if migrating to Vue 3, consider using `@segment/analytics-vue`. For ongoing Vue 2 projects, be aware that active feature development for this package is minimal, focusing on maintenance.

affects: >=0.5.0

gotchaThe package has seen infrequent updates since mid-2022, primarily for dependency bumps. New features or rapid bug fixes are unlikely, indicating it is in maintenance mode.

fix

Assess the stability and feature set required for your project. If you need advanced features or rapid updates, you might need to contribute or consider alternative integration methods.

affects: >=0.5.4

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '$segment')

This error occurs when trying to access `this.$segment` within a Vue component, but the `vue-segment-analytics` plugin has not been correctly installed via `Vue.use()` or if the component is somehow outside the scope of the Vue instance where the plugin was installed.

fix

Ensure `Vue.use(VueSegmentAnalytics, { id: 'YOUR_SEGMENT_WRITE_KEY' })` is called before instantiating your Vue app. Verify that the component attempting to access `$segment` is part of the Vue instance tree.

Segment events are not being sent or are not visible in the Segment debugger.

This is typically caused by an incorrect or missing Segment 'Write Key' (`id` property in the options), network blocking (e.g., ad blockers, corporate firewalls), or incorrect event payload structure.

fix

Double-check your `id` configuration in `Vue.use()`. Ensure it matches your Segment project's Write Key. Use the browser's network tab or Segment's debugger to inspect network requests. Temporarily disable ad blockers during development.

Error: 'Vue' is not defined or 'Vue' is not a constructor

This usually indicates that Vue is not correctly imported or globally exposed in your project environment, or you are attempting to use the plugin in a non-Vue 2 environment.

fix

Make sure you have `import Vue from 'vue'` at the top of your main JavaScript file and that you are using Vue 2. If using CommonJS, ensure Vue is properly `require`d and exposed.

Upgrade

Version history

0.5.4latest on npm

Audit

Dependencies

vuerequiredRuntime dependency, specifically requires Vue ^2.0.0.

Agent activity

53 hits · last 30 days

node

OpenAI (training)

Amazon

Resources

githubhttps://github.com/Kapiche/vue-segment-analytics ↗

packagehttps://www.npmjs.com/package/vue-segment-analytics ↗