All functionality from version v2 is preserved in v3, although most options have been renamed and organized by their scope. The primary focus has been on rewriting the entire codebase in TypeScript to enhance the developer experience and ensure better type safety.
vue-gtag is ESM-only. Check out this article if you want to know more about the reasons behind ESM-only builds.
installation
v2
import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";
createApp(App).use(VueGtag, {
config: { id: "GA_MEASUREMENT_ID" }
}).mount("#app");
v3
import { createApp } from "vue";
import App from "./App.vue";
import { createGtag } from "vue-gtag";
const gtag = createGtag({
tagId: "GA_MEASUREMENT_ID"
})
createApp(App).use(gtag).mount('#app') // <-- only if you need global methods
The installation no longer requires the App instance, and it can be triggered anywhere in your app if you don't need global events.
With v3, it is now possible to use the built-in useConsent composable, which will bootstrap gtag.js and provide methods to directly accept or deny user consent.
Instead of manually calling addGtag, a more GDPR-compliant approach is to use the useConsent composable. This will facilitate consent handling, cookie checks, and adding gtag to your app.