refactor: migrate to vue 3 (#311)

Supports Vue 3, and it provides the exact same API as vue-gtag 1, so users can reuse their existing code with Vue 3

BREAKING CHANGE: requires Vue 3

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env"],
+};

package.json

@@ -79,12 +79,11 @@
   },
   "homepage": "https://github.com/MatteoGabriele/vue-gtag#readme",
   "peerDependencies": {
-    "vue": "^2.0.0"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
     "@babel/preset-env": "^7.7.1",
-    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
     "bili": "^5.0.5",
     "commitizen": "^4.0.3",
@@ -105,8 +104,8 @@
     "rollup-plugin-alias": "^2.2.0",
     "rollup-plugin-resolve": "^0.0.1-predev.1",
     "semantic-release": "^15.13.31",
-    "vue": "^2.6.12",
-    "vue-router": "^3.1.3",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.6",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/add-routes-tracker.js

@@ -1,4 +1,4 @@
-import Vue from "vue";
+import { nextTick } from "vue";
 import { isFn } from "@/utils";
 import { getRouter } from "@/router";
 import { getOptions } from "@/options";
@@ -14,21 +14,21 @@ export default () => {
   const { onBeforeTrack, onAfterTrack } = getOptions();
   const router = getRouter();
 
-  router.onReady(() => {
-    Vue.nextTick().then(() => {
+  router.isReady().then(() => {
+    nextTick().then(() => {
       const { currentRoute } = router;
 
       addConfiguration();
 
-      if (isRouteExcluded(currentRoute)) {
+      if (isRouteExcluded(currentRoute.value)) {
         return;
       }
 
-      track(currentRoute);
+      track(currentRoute.value);
     });
 
     router.afterEach((to, from) => {
-      Vue.nextTick().then(() => {
+      nextTick().then(() => {
         if (isRouteExcluded(to)) {
           return;
         }

src/attach-api.js

@@ -1,5 +1,7 @@
 import * as api from "@/api";
 
-const attachApi = (Vue) => (Vue.$gtag = Vue.prototype.$gtag = api);
+const attachApi = (app) => {
+  app.config.globalProperties.$gtag = api;
+};
 
 export default attachApi;

src/index.js

@@ -3,8 +3,8 @@ import { setOptions, getOptions } from "@/options";
 import bootstrap from "@/bootstrap";
 import { setRouter } from "@/router";
 
-const install = (Vue, options = {}, router) => {
-  attachApi(Vue);
+const install = (app, options = {}, router) => {
+  attachApi(app);
   setOptions(options);
   setRouter(router);
 

test/add-configuration.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue } from "@vue/test-utils";
+import { createApp } from "vue";
 import VueGtag from "@/index";
 import * as api from "@/api";
 
@@ -10,9 +10,9 @@ describe("add-configuration", () => {
   });
 
   test("fires a configuration for the main domain", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       config: {
         id: 1,
       },
@@ -25,9 +25,9 @@ describe("add-configuration", () => {
   });
 
   test("fires a configuration for multiple domains", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       includes: [
         {
           id: 2,

test/add-routes-tracker.spec.js

@@ -1,6 +1,6 @@
-import { mount, createLocalVue } from "@vue/test-utils";
+import { createApp } from "vue";
 import flushPromises from "flush-promises";
-import VueRouter from "vue-router";
+import { createMemoryHistory, createRouter } from "vue-router";
 import VueGtag from "@/index";
 import * as api from "@/api";
 import * as utils from "@/utils";
@@ -11,7 +11,9 @@ jest.mock("@/track");
 jest.mock("@/api");
 jest.mock("@/add-configuration");
 
-const App = { template: "<div>app</div>" };
+const Home = { template: "<div></div>" };
+const About = { template: "<div></div>" };
+const Contact = { template: "<div></div>" };
 
 describe("page-tracker", () => {
   const { location } = window;
@@ -30,11 +32,11 @@ describe("page-tracker", () => {
   });
 
   beforeEach(() => {
-    router = new VueRouter({
-      mode: "abstract",
+    router = createRouter({
+      history: createMemoryHistory(),
       routes: [
-        { name: "home", path: "/" },
-        { name: "about", path: "/about" },
+        { name: "home", path: "/", component: Home },
+        { name: "about", path: "/about", component: About },
       ],
     });
 
@@ -47,13 +49,13 @@ describe("page-tracker", () => {
   });
 
   test("waits router ready before start tracking", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    jest.spyOn(router, "onReady").mockResolvedValue();
+    jest.spyOn(router, "isReady").mockResolvedValue();
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         config: {
@@ -63,20 +65,18 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 
-    expect(router.onReady).toHaveBeenCalledBefore(api.config);
+    expect(router.isReady).toHaveBeenCalledBefore(api.config);
   });
 
   test("fires the config hit", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         config: {
@@ -86,23 +86,21 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 
     expect(addConfiguration).toHaveBeenCalled();
 
-    expect(track).toHaveBeenCalledWith(router.currentRoute);
+    expect(track).toHaveBeenCalledWith(router.currentRoute.value);
     expect(track).toHaveBeenCalledTimes(1);
   });
 
   test("fires track after each route change", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         config: {
@@ -112,8 +110,6 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 
@@ -159,12 +155,12 @@ describe("page-tracker", () => {
   });
 
   test("fires the onBeforeTrack method", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
     const onBeforeTrackSpy = jest.fn();
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         onBeforeTrack: onBeforeTrackSpy,
@@ -175,8 +171,6 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 
@@ -198,12 +192,12 @@ describe("page-tracker", () => {
   });
 
   test("fires the onAfterTrack method", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
     const onAfterTrackSpy = jest.fn();
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         onAfterTrack: onAfterTrackSpy,
@@ -214,8 +208,6 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 
@@ -237,20 +229,20 @@ describe("page-tracker", () => {
   });
 
   test("remove routes from tracking based on path", async () => {
-    const localVue = createLocalVue();
+    const app = createApp();
     const onAfterTrackSpy = jest.fn();
-    const router = new VueRouter({
-      mode: "abstract",
+    const router = createRouter({
+      history: createMemoryHistory(),
       routes: [
-        { name: "home", path: "/" },
-        { path: "/about" },
-        { name: "contacts", path: "/contacts" },
+        { name: "home", path: "/", component: Home },
+        { path: "/about", component: About },
+        { name: "contacts", path: "/contacts", component: Contact },
       ],
     });
 
-    localVue.use(VueRouter);
+    app.use(router);
 
-    localVue.use(
+    app.use(
       VueGtag,
       {
         pageTrackerExcludedRoutes: ["/about", "contacts"],
@@ -262,8 +254,6 @@ describe("page-tracker", () => {
       router
     );
 
-    mount(App, { router, localVue });
-
     router.push("/");
     await flushPromises();
 

test/api/disable.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue } from "@vue/test-utils";
+import { createApp } from "vue";
 import disable from "@/api/disable";
 import VueGtag from "@/index";
 
@@ -8,9 +8,9 @@ describe("disable", () => {
   });
 
   test("turns off tracking", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       config: {
         id: 1,
       },
@@ -22,9 +22,9 @@ describe("disable", () => {
   });
 
   test("turns on tracking", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       config: {
         id: 1,
       },
@@ -36,9 +36,9 @@ describe("disable", () => {
   });
 
   test("turns off tracking for multiple domains", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       includes: [{ id: 2 }, { id: 3 }],
       config: {
         id: 1,
@@ -53,9 +53,9 @@ describe("disable", () => {
   });
 
   test("turns on tracking for multiple domains", () => {
-    const localVue = createLocalVue();
+    const app = createApp();
 
-    localVue.use(VueGtag, {
+    app.use(VueGtag, {
       includes: [{ id: 2 }, { id: 3 }],
       config: {
         id: 1,