{"id":12489,"library":"vue-gtag-next","title":"Vue Gtag Next","description":"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.","status":"abandoned","version":"1.14.0","language":"javascript","source_language":"en","source_url":"https://github.com/MatteoGabriele/vue-gtag-next","tags":["javascript","google","google analytics","tracking","google tracking","vue-analytics","vue-gtag","gtag","gtag.js","typescript"],"install":[{"cmd":"npm install vue-gtag-next","lang":"bash","label":"npm"},{"cmd":"yarn add vue-gtag-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-gtag-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue 3 applications.","package":"vue","optional":false}],"imports":[{"note":"The default export is the plugin function used with app.use(). ESM is required for Vue 3 applications.","wrong":"const VueGtagNext = require('vue-gtag-next')","symbol":"default","correct":"import VueGtagNext from 'vue-gtag-next'"},{"note":"This provides the Composition API hook for accessing gtag functions within components. Available since v1.14.0.","symbol":"useGtag","correct":"import { useGtag } from 'vue-gtag-next'"},{"note":"This exports the raw gtag function for direct use, primarily outside of Vue components or for advanced scenarios. Available since v1.14.0.","symbol":"gtag","correct":"import { gtag } from 'vue-gtag-next'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport VueGtagNext, { useGtag } from 'vue-gtag-next';\n\nconst App = {\n template: `\n
\n

Google Analytics Demo

\n \n \n
\n `,\n setup() {\n const { event } = useGtag();\n\n const sendPageView = () => {\n event('page_view', {\n page_title: 'Home Page',\n page_path: '/',\n });\n console.log('Page view sent!');\n };\n\n const sendEvent = () => {\n event('button_click', {\n event_category: 'engagement',\n event_label: 'Call to Action',\n value: 1,\n });\n console.log('Custom event sent!');\n };\n\n return { sendPageView, sendEvent };\n },\n};\n\nconst app = createApp(App);\n\napp.use(VueGtagNext, {\n property: {\n id: process.env.VUE_APP_GA_ID ?? 'G-XXXXXXXXXX' // Replace with your actual GA ID\n },\n enabled: true, // Enable or disable tracking\n bootstrap: true, // Inject gtag.js script automatically\n});\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always cross-reference your tracking implementation with the official gtag.js documentation to ensure accuracy. Manually verify data in Google Analytics.","message":"Lack 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).","severity":"gotcha","affected_versions":">=1.14.0"},{"fix":"Assess the security implications carefully. For critical applications, prefer actively maintained libraries or direct gtag.js integration.","message":"Due 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Error: \"gtag\" is not defined"},{"fix":"Ensure you are importing `createApp` from 'vue' and calling `createApp(App)` to create your application instance before calling `app.use()`.","cause":"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.","error":"TypeError: app.use is not a function"},{"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.","cause":"The `useGtag` composable was called outside of a component's setup context or before the `VueGtagNext` plugin was installed on the Vue application instance.","error":"Cannot read properties of undefined (reading 'event') when using useGtag()"}],"ecosystem":"npm"}