Add Vue augmentation to type global mixin properties

Author: brawaru

.changeset/cool-trains-roll.md

@@ -0,0 +1,19 @@
+---
+'@vintl/vintl': minor
+---
+
+Added Vue types augmentation to type the global mixin properties
+
+Mixin-provided global properties like `$t`, `$fmt` and `$i18n` should be properly typed now.
+
+If you don't use the global mixin, the below augmentation will remove these unusable properties.
+
+```ts
+declare global {
+  namespace VueIntlController {
+    interface Options {
+      globalMixin: false
+    }
+  }
+}
+```

README.md

@@ -374,6 +374,14 @@ You can declare your messages by creating an ambient declaration file where you
 
   A map of locale resources provided by the load event listeners.
 
+- `interface` `Options`
+
+  A map of options affecting type augmentation.
+
+  Currently supported options:
+
+  - `globalMixin` (`boolean`, default `true`) - whether to augment Vue types to type mixin-provided global properties.
+
 <details>
 <summary>Example</summary>
 
@@ -394,6 +402,10 @@ import type { ExampleObject } from '~/utils/convertibleObject.ts'
 
 declare global {
   namespace VueIntlController {
+    interface Options {
+      globalMixin: false // Remove types for mixin-provided properties.
+    }
+
     interface MessageValueTypes {
       // key doesn't matter as long as it does not collide with other key;
       // the interface used here solely for extensibility since you cannot

src/types/index.ts

@@ -1,3 +1,4 @@
+import './vue-augment.js'
 export * from './messages.js'
 export * from './locales.js'
 export * from './sources.js'

src/types/vue-augment.ts

@@ -0,0 +1,22 @@
+import type { InjectedProperties } from '../plugin.js'
+import type { MessageValueType } from './messages.js'
+
+declare global {
+  namespace VueIntlController {
+    interface Options {}
+  }
+}
+
+type ConditionalExtensions = VueIntlController.Options extends {
+  globalMixin: infer GlobalMixin
+}
+  ? [GlobalMixin] extends [true]
+    ? InjectedProperties<MessageValueType>
+    : {}
+  : InjectedProperties<MessageValueType>
+
+declare module 'vue' {
+  export interface ComponentCustomProperties extends ConditionalExtensions {}
+}
+
+export {}