✨ add support to Vue 3

Author: VitorLuizC

README.md

@@ -15,10 +15,14 @@ npm i vue-uuid
 Vue's `use` method will do the trick adding to Vue.
 
 ```js
-import Vue from "vue";
-import UUID from "vue-uuid";
+import { createApp } from "vue";
+import withUUID from "vue-uuid";
 
-Vue.use(UUID);
+const app = withUUID(
+  createApp({
+    // ...
+  }),
+);
 ```
 
 ## Usage

dist/index.esm.js

@@ -1,5 +1,6 @@
 import { v1, v3, v4, v5 } from 'uuid';
 
+// @ts-check
 /**
  * @typedef {Object} UUID
  * @property {typeof v1} v1
@@ -20,25 +21,39 @@ var uuid = {
   v5: v5
 };
 /**
- * Installs UUID on Vue instance. It creates a property on Vue instance to
- * expose an object with uuid's v1, v3, v4 and v5 functions.
+ * @typedef {import('vue').App<HostElement>} App
+ * @template HostElement
+ */
+
+/**
+ * Defines '$uuid' property globally, to be accessed in any component instance
+ * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and
+ * v5 functions.
+ *
  * @example ```js
  * import Vue from 'vue';
- * import VueUUID from 'vue-uuid';
+ * import withUUID from 'vue-uuid';
  *
- * Vue.use(VueUUID);
+ * const app = withUUID(
+ *   createApp({
+ *     // ...
+ *   }),
+ * );
  *
- * new Vue({
- *   mounted () {
- *     console.log(this.$uuid.v1());
+ * app.component('c-button', {
+ *   created() {
+ *     this.id = this.$uuid.v4();
  *   }
  * });
  * ```
- * @param {import('vue').default} Vue Vue constructor.
+ * @param {App<HostElement>} app
+ * @returns {App<HostElement>}
+ * @template HostElement
  */
 
-function install(Vue) {
-  Vue.prototype.$uuid = uuid;
+function withUUID(app) {
+  app.config.globalProperties["$uuid"] = uuid;
+  return app;
 }
 
-export { install as default, uuid };
+export { withUUID as default, uuid };

dist/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var uuid$1 = require('uuid');
 
+// @ts-check
 /**
  * @typedef {Object} UUID
  * @property {typeof v1} v1
@@ -24,26 +25,40 @@ var uuid = {
   v5: uuid$1.v5
 };
 /**
- * Installs UUID on Vue instance. It creates a property on Vue instance to
- * expose an object with uuid's v1, v3, v4 and v5 functions.
+ * @typedef {import('vue').App<HostElement>} App
+ * @template HostElement
+ */
+
+/**
+ * Defines '$uuid' property globally, to be accessed in any component instance
+ * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and
+ * v5 functions.
+ *
  * @example ```js
  * import Vue from 'vue';
- * import VueUUID from 'vue-uuid';
+ * import withUUID from 'vue-uuid';
  *
- * Vue.use(VueUUID);
+ * const app = withUUID(
+ *   createApp({
+ *     // ...
+ *   }),
+ * );
  *
- * new Vue({
- *   mounted () {
- *     console.log(this.$uuid.v1());
+ * app.component('c-button', {
+ *   created() {
+ *     this.id = this.$uuid.v4();
  *   }
  * });
  * ```
- * @param {import('vue').default} Vue Vue constructor.
+ * @param {App<HostElement>} app
+ * @returns {App<HostElement>}
+ * @template HostElement
  */
 
-function install(Vue) {
-  Vue.prototype.$uuid = uuid;
+function withUUID(app) {
+  app.config.globalProperties["$uuid"] = uuid;
+  return app;
 }
 
-exports["default"] = install;
+exports["default"] = withUUID;
 exports.uuid = uuid;

dist/index.umd.js

@@ -4,6 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueUUID = {}, global.uuid$1));
 })(this, (function (exports, uuid$1) { 'use strict';
 
+  // @ts-check
   /**
    * @typedef {Object} UUID
    * @property {typeof v1} v1
@@ -24,28 +25,42 @@
     v5: uuid$1.v5
   };
   /**
-   * Installs UUID on Vue instance. It creates a property on Vue instance to
-   * expose an object with uuid's v1, v3, v4 and v5 functions.
+   * @typedef {import('vue').App<HostElement>} App
+   * @template HostElement
+   */
+
+  /**
+   * Defines '$uuid' property globally, to be accessed in any component instance
+   * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and
+   * v5 functions.
+   *
    * @example ```js
    * import Vue from 'vue';
-   * import VueUUID from 'vue-uuid';
+   * import withUUID from 'vue-uuid';
    *
-   * Vue.use(VueUUID);
+   * const app = withUUID(
+   *   createApp({
+   *     // ...
+   *   }),
+   * );
    *
-   * new Vue({
-   *   mounted () {
-   *     console.log(this.$uuid.v1());
+   * app.component('c-button', {
+   *   created() {
+   *     this.id = this.$uuid.v4();
    *   }
    * });
    * ```
-   * @param {import('vue').default} Vue Vue constructor.
+   * @param {App<HostElement>} app
+   * @returns {App<HostElement>}
+   * @template HostElement
    */
 
-  function install(Vue) {
-    Vue.prototype.$uuid = uuid;
+  function withUUID(app) {
+    app.config.globalProperties["$uuid"] = uuid;
+    return app;
   }
 
-  exports["default"] = install;
+  exports["default"] = withUUID;
   exports.uuid = uuid;
 
   Object.defineProperty(exports, '__esModule', { value: true });

dist/index.umd.min.js

@@ -1,5 +1,5 @@
-import Vue from "vue";
-import { v1, v3, v4, v5 } from "uuid";
+import type { App } from "vue";
+import type { v1, v3, v4, v5 } from "uuid";
 
 export interface UUID {
   v1: typeof v1;
@@ -8,8 +8,8 @@ export interface UUID {
   v5: typeof v5;
 }
 
-declare module "vue/types/vue" {
-  interface VueConstructor {
+declare module "@vue/runtime-core" {
+  export interface ComponentCustomProperties {
     /**
      * An object with uuid's v1, v3, v4 and v5 functions.
      */
@@ -23,20 +23,26 @@ declare module "vue/types/vue" {
 export const uuid: UUID;
 
 /**
- * Installs UUID on Vue instance. It creates a property on Vue instance to
- * expose an object with uuid's v1, v3, v4 and v5 functions.
- * @example ```js
+ * Defines '$uuid' property globally, to be accessed in any component instance
+ * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and
+ * v5 functions.
+ *
+ * @example
  * import Vue from 'vue';
- * import VueUUID from 'vue-uuid';
+ * import withUUID from 'vue-uuid';
  *
- * Vue.use(VueUUID);
+ * const app = withUUID(
+ *   createApp({
+ *     // ...
+ *   }),
+ * );
  *
- * new Vue({
- *   mounted () {
- *     console.log(this.$uuid.v1());
+ * app.component('c-button', {
+ *   created() {
+ *     this.id = this.$uuid.v4();
  *   }
  * });
- * ```
- * @param Vue - Vue constructor.
  */
-export default function install(Vue: Vue): void;
+export default function withUUID<HostElement = any>(
+  app: App<HostElement>
+): App<HostElement>;

dist/index.umd.min.js.map

@@ -1,3 +1,5 @@
+// @ts-check
+
 import { v1, v3, v4, v5 } from "uuid";
 
 /**
@@ -15,22 +17,35 @@ import { v1, v3, v4, v5 } from "uuid";
 export const uuid = { v1, v3, v4, v5 };
 
 /**
- * Installs UUID on Vue instance. It creates a property on Vue instance to
- * expose an object with uuid's v1, v3, v4 and v5 functions.
- * @example ```js
+ * @typedef {import('vue').App<HostElement>} App
+ * @template HostElement
+ */
+
+/**
+ * Defines '$uuid' property globally, to be accessed in any component instance
+ * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and
+ * v5 functions.
+ *
+ * @example
  * import Vue from 'vue';
- * import VueUUID from 'vue-uuid';
+ * import withUUID from 'vue-uuid';
  *
- * Vue.use(VueUUID);
+ * const app = withUUID(
+ *   createApp({
+ *     // ...
+ *   }),
+ * );
  *
- * new Vue({
- *   mounted () {
- *     console.log(this.$uuid.v1());
+ * app.component('c-button', {
+ *   created() {
+ *     this.id = this.$uuid.v4();
  *   }
  * });
- * ```
- * @param {import('vue').default} Vue Vue constructor.
+ * @param {App<HostElement>} app
+ * @returns {App<HostElement>}
+ * @template HostElement
  */
-export default function install(Vue) {
-  Vue.prototype.$uuid = uuid;
+export default function withUUID(app) {
+  app.config.globalProperties["$uuid"] = uuid;
+  return app;
 }