chore(deps-dev): bump vue-template-compiler from 2.6.12 to 2.6.14

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 jobs:
   dependencies:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:
@@ -16,7 +16,7 @@ jobs:
             - ./node_modules
   test:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:
@@ -26,7 +26,7 @@ jobs:
 
   lint:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:
@@ -36,7 +36,7 @@ jobs:
 
   code_climate:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:
@@ -51,7 +51,7 @@ jobs:
 
   build:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:
@@ -61,7 +61,7 @@ jobs:
 
   semantic_release:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:12.18.1
     steps:
       - checkout
       - restore_cache:

README.md

@@ -1,3 +1,6 @@
+🔥 **HEADS UP!** This is version 2 branch and it requires Vue 3. If you are looking for a Vue 2 compatible version, use [version 1](https://github.com/MatteoGabriele/vue-gtag/tree/1.0). You can find both documentations [here](https://matteo-gabriele.gitbook.io/vue-gtag/) 
+
+
 <p align="center">
   <img width="250" src="https://i.imgur.com/AlAf04U.png">
   <br>
@@ -27,18 +30,14 @@ Global Site Tag plugin for Vue
 
 The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform. For general gtag.js [documentation](https://developers.google.com/analytics/devguides/collection/gtagjs), read the gtag.js developer guide.
 
-## Vue 3 update
-Released Vue 3 compatible version on this new repo https://github.com/MatteoGabriele/vue-gtag-next and you can install the package under `vue-gtag-next`. I will release it under the `vue-gtag` package once Vue will officially release version 3 as latest version.
-If you have any feedback, please consider opening an issue on https://github.com/MatteoGabriele/vue-gtag-next/issues :pray:
-
 ## Requirements
 
-Vue ^2.0.0
+Vue ^3.0.0
 
 ## Install
 
 ```bash
-npm install vue-gtag
+npm install vue-gtag@next
 ```
 
 ## Documentation

babel.config.js

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

package.json

@@ -11,6 +11,9 @@
     "type": "git",
     "url": "https://github.com/MatteoGabriele/vue-gtag"
   },
+  "release": {
+    "branches": ["master", "next"]
+  },
   "scripts": {
     "commit": "git-cz",
     "clean": "del-cli dist",
@@ -79,12 +82,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",
@@ -93,9 +95,9 @@
     "del-cli": "^3.0.0",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-jest": "^23.0.4",
+    "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint-plugin-vue": "^7.9.0",
     "flush-promises": "^1.0.2",
     "jest": "^26.0.1",
     "jest-extended": "^0.11.5",
@@ -105,8 +107,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,5 +1,5 @@
-import Vue from "vue";
-import { isFn } from "@/utils";
+import { nextTick } from "vue";
+import { isFunction } from "@vue/shared";
 import { getRouter } from "@/router";
 import { getOptions } from "@/options";
 import addConfiguration from "@/add-configuration";
@@ -14,32 +14,32 @@ 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;
         }
 
-        if (isFn(onBeforeTrack)) {
+        if (isFunction(onBeforeTrack)) {
           onBeforeTrack(to, from);
         }
 
         track(to, from);
 
-        if (isFn(onAfterTrack)) {
+        if (isFunction(onAfterTrack)) {
           onAfterTrack(to, from);
         }
       });

src/api/query.js

@@ -2,11 +2,11 @@ import { getOptions } from "@/options";
 import { isBrowser } from "@/utils";
 
 export default (...args) => {
-  if (!isBrowser()) {
+  const { globalObjectName } = getOptions();
+
+  if (!isBrowser() || typeof window[globalObjectName] === "undefined") {
     return;
   }
 
-  const { globalObjectName } = getOptions();
-
   window[globalObjectName](...args);
 };

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);
 

src/track.js

@@ -1,5 +1,6 @@
+import { isFunction } from "@vue/shared";
 import { getOptions } from "@/options";
-import { validateScreenviewShape, isFn } from "@/utils";
+import { validateScreenviewShape } from "@/utils";
 import * as api from "@/api";
 
 export default (to = {}, from = {}) => {
@@ -16,7 +17,7 @@ export default (to = {}, from = {}) => {
 
   let template = to;
 
-  if (isFn(proxy)) {
+  if (isFunction(proxy)) {
     template = proxy(to, from);
   } else if (useScreenview) {
     template = validateScreenviewShape({

src/utils.js

@@ -1,3 +1,5 @@
+import { isPlainObject } from "@vue/shared";
+
 export const load = (url, options = {}) => {
   return new Promise((resolve, reject) => {
     if (typeof document === "undefined") {
@@ -27,25 +29,19 @@ export const load = (url, options = {}) => {
   });
 };
 
-export const isFn = (fn) => typeof fn === "function";
-
-export const isObject = (item) => {
-  return item && typeof item === "object" && !Array.isArray(item);
-};
-
 export const mergeDeep = (target, ...sources) => {
   if (!sources.length) {
     return target;
   }
 
   const source = sources.shift();
 
-  if (!isObject(target) || !isObject(source)) {
+  if (!isPlainObject(target) || !isPlainObject(source)) {
     return;
   }
 
   for (const key in source) {
-    if (isObject(source[key])) {
+    if (isPlainObject(source[key])) {
       if (!target[key]) {
         Object.assign(target, { [key]: {} });
       }

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,