feat: from vue2 to vue3

Loschcode · Jun 17, 2021 · a4efa5a · a4efa5a
1 parent 8038ebe
commit a4efa5a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -15,47 +15,56 @@ For testing purpose, don't forget to [turn it off yourself](https://support.goog
 ### Browser
 ```
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
-  <script src="https://unpkg.com/vue-mixpanel@1.0.7/index.js"></script>
+  <script src="https://unpkg.com/vue-mixpanel@2.0.0/index.js"></script>
 ```
 ### Package Managers
 ```
 npm install vue-mixpanel --save
 yarn add vue-mixpanel --save
-
-// require
-var Vue = require('vue')
-Vue.use(require('vue-mixpanel'), {
-  token: YOUR_TOKEN
-})
-
-// import
-import Vue from 'vue'
-import VueMixpanel from 'vue-mixpanel'
-Vue.use(VueMixpanel, {
-  token: YOUR_TOKEN
-})
 ```
 
 ### How does it work?
 
-- Initialize it by using the token given by your [Mixpanel](https://mixpanel.com/) account in the `Vue.use()` inside you `main.js`
-- Start using their public API through `this.$mixpanel` in your components.
+- Initialize it by using the token given by your [Mixpanel](https://mixpanel.com/) account in the `app.use()` inside you `main.js`
+- Start using their public API with `inject` through `this.mixpanel` in your components.
 
 ## Example Usage
 
-#### Initialize with config
+>If you're using Vue 2 or below, please check the version [1.1.0](https://github.com/Loschcode/vue-mixpanel/releases/tag/1.1.0)
+
+#### Initialize with configuration
 ```
-Vue.use(VueMixpanel, {
+import App from './App.vue'
+import VueMixpanel from 'vue-mixpanel'
+
+const app = createApp(App)
+app.use(VueMixpanel, {
   token: YOUR_TOKEN,
   config: {
     debug: true
   }
 })
+app.mount('#app')
+```
+
+Then, you can use it in your components like so
+
+```
+<script>
+export default {
+  inject: ['mixpanel'],
+  name: 'App',
+
+  created () {
+    this.mixpanel.track('test')
+  }
+}
+</script>
 ```
 
 #### Track an event
 ```
-this.$mixpanel.track('event name', {
+this.mixpanel.track('event name', {
     distinct_id: 'unique client id',
     property_1: 'value 1',
     property_2: 'value 2',
@@ -65,12 +74,12 @@ this.$mixpanel.track('event name', {
 
 #### Create an alias
 ```
-this.$mixpanel.alias('distinct_id', 'your_alias');
+this.mixpanel.alias('distinct_id', 'your_alias');
 ```
 
 #### Increment a numeric property
 ```
-this.$mixpanel.people.increment('13793', 'games_played');
+this.mixpanel.people.increment('13793', 'games_played');
 ```
 
 ## License

diff --git a/index.js b/index.js
@@ -1,6 +1,6 @@
 "use strict";
 /**
-  * Vue Mixpanel v1.1.0
+  * Vue Mixpanel v2.0.0
   * https://github.com/Loschcode/vue-mixpanel
   *
   * Copyright 2020-2021, cmp-cc
@@ -11,16 +11,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var mixpanel_browser_1 = __importDefault(require("mixpanel-browser"));
-var VueMixpanel = {
-    install: function () { }
+exports.default = {
+    install: function (app, _a) {
+        var _b = _a.config, config = _b === void 0 ? {} : _b, token = _a.token;
+        var defaultConfig = {};
+        var endConfig = Object.assign(config, defaultConfig);
+        mixpanel_browser_1.default.init(token, endConfig);
+        app.provide('mixpanel', mixpanel_browser_1.default);
+    }
 };
-VueMixpanel.install = function (Vue, _a) {
-    var config = _a.config, token = _a.token;
-    if (typeof config !== 'object')
-        config = {};
-    Vue.prototype.$mixpanel = mixpanel_browser_1.default;
-    var defaultConfig = {};
-    var endConfig = Object.assign(config, defaultConfig);
-    Vue.prototype.$mixpanel.init(token, endConfig);
-};
-exports.default = VueMixpanel;
diff --git a/index.ts b/index.ts
@@ -1,5 +1,5 @@
 /**
-  * Vue Mixpanel v1.1.0
+  * Vue Mixpanel v2.0.0
   * https://github.com/Loschcode/vue-mixpanel
   *
   * Copyright 2020-2021, cmp-cc
@@ -8,23 +8,12 @@
 
 import mixpanel from 'mixpanel-browser'
 
-interface VueMixpanelType {
-  install: object
-}
+export default {
+  install: (app: any, { config = {}, token }: { config: object; token: string;}) => {
+    const defaultConfig = {}
+    const endConfig = Object.assign(config, defaultConfig)
 
-let VueMixpanel: VueMixpanelType = {
-  install: () => {}
+    mixpanel.init(token, endConfig)
+    app.provide('mixpanel', mixpanel)
+  }
 }
-
-VueMixpanel.install = function (Vue: any, { config, token }: { config: object; token: string; }) {
-  if (typeof config !== 'object') config = {}
-
-  Vue.prototype.$mixpanel = mixpanel
-
-  const defaultConfig = {}
-  const endConfig = Object.assign(config, defaultConfig)
-
-  Vue.prototype.$mixpanel.init(token, endConfig)
-}
-
-export default VueMixpanel