Registry / observability / vue-gtag-next

vue-gtag-next

library1.14.0jsnpmunverified

vue-gtag-next is a plugin designed for Vue 3 to integrate Google's Global Site Tag (gtag.js), enabling event data collection for services like Google Analytics and Google Ads. The package's current stable version is 1.14.0, last released in October 2020. According to its README from that period, it explicitly stated "it's not production ready" and was developed when "Vue 3 is not out yet." This indicates that development ceased early in Vue 3's lifecycle, and the package has not received updates to keep pace with subsequent Vue 3 releases or changes in gtag.js. Its release cadence has effectively stopped. While it aimed to provide a convenient wrapper for gtag.js within a Vue 3 application, its unmaintained status and early development phase mean it lacks long-term support and may have compatibility issues with current Vue 3 versions, making it a potentially risky choice for modern applications compared to actively maintained alternatives.

observability web-framework

npm install vue-gtag-next

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-GTAG-NEXT

vue-gtag-next

observabilityjavascriptv1.14.0

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.

default

✓ import VueGtagNext from 'vue-gtag-next'

✗ const VueGtagNext = require('vue-gtag-next')

The default export is the plugin function used with app.use(). ESM is required for Vue 3 applications.

useGtag

✓ import { useGtag } from 'vue-gtag-next'

This provides the Composition API hook for accessing gtag functions within components. Available since v1.14.0.

gtag

✓ import { gtag } from 'vue-gtag-next'

This exports the raw gtag function for direct use, primarily outside of Vue components or for advanced scenarios. Available since v1.14.0.

This quickstart initializes the VueGtagNext plugin with a Google Analytics ID and demonstrates sending both a page view event and a custom event from a Vue 3 component using the Composition API's `useGtag` hook.

import { createApp } from 'vue'; import VueGtagNext, { useGtag } from 'vue-gtag-next'; const App = { template: ` <div> <h1>Google Analytics Demo</h1> <button @click="sendPageView">Send Page View</button> <button @click="sendEvent">Send Custom Event</button> </div> `, setup() { const { event } = useGtag(); const sendPageView = () => { event('page_view', { page_title: 'Home Page', page_path: '/', }); console.log('Page view sent!'); }; const sendEvent = () => { event('button_click', { event_category: 'engagement', event_label: 'Call to Action', value: 1, }); console.log('Custom event sent!'); }; return { sendPageView, sendEvent }; }, }; const app = createApp(App); app.use(VueGtagNext, { property: { id: process.env.VUE_APP_GA_ID ?? 'G-XXXXXXXXXX' // Replace with your actual GA ID }, enabled: true, // Enable or disable tracking bootstrap: true, // Inject gtag.js script automatically }); app.mount('#app');

Debug

Known issues

breakingThe package explicitly states it is 'not production ready' and was developed when 'Vue 3 is not out yet' (as of October 2020). It has not received updates since 2020, making it highly likely to be incompatible with modern Vue 3 versions and best practices.

fix

Consider using an actively maintained Google Analytics integration for Vue 3, or implement gtag.js manually until this package receives updates or an alternative emerges.

affects: >=1.0.0

gotchaLack of maintenance since October 2020 means the package may not include updates to the gtag.js specification, potentially leading to outdated or incorrect tracking implementations for newer Google Analytics features (e.g., GA4 specific events).

fix

Always cross-reference your tracking implementation with the official gtag.js documentation to ensure accuracy. Manually verify data in Google Analytics.

affects: >=1.14.0

gotchaDue to its abandoned status, there is no ongoing security auditing or bug fixes. Using unmaintained tracking libraries can pose supply chain security risks if vulnerabilities are discovered and not patched.

fix

Assess the security implications carefully. For critical applications, prefer actively maintained libraries or direct gtag.js integration.

affects: >=1.0.0

Errors

Common errors & fixes

Error: "gtag" is not defined

The gtag.js script was not correctly loaded or initialized before the VueGtagNext plugin attempted to use it, or the plugin itself failed to initialize.

fix

Ensure the VueGtagNext plugin is correctly installed with `app.use()` and that the `property.id` configuration is valid. Check network requests to confirm `gtag.js` is loading.

TypeError: app.use is not a function

This typically indicates that `app` is not a valid Vue 3 application instance, or you are attempting to use `app.use` on a non-Vue 3 environment.

fix

Ensure you are importing `createApp` from 'vue' and calling `createApp(App)` to create your application instance before calling `app.use()`.

Cannot read properties of undefined (reading 'event') when using useGtag()

The `useGtag` composable was called outside of a component's setup context or before the `VueGtagNext` plugin was installed on the Vue application instance.

fix

Ensure `app.use(VueGtagNext, { ... })` is called before your component that uses `useGtag` is mounted. Call `useGtag()` only within the `setup()` function of a Vue component.

Upgrade

Version history

1.14.0latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for Vue 3 applications.

Agent activity

28 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/MatteoGabriele/vue-gtag-next ↗

packagehttps://www.npmjs.com/package/vue-gtag-next ↗