From 67fdb7bbcb52ca9423fc618187a67465bd46fd63 Mon Sep 17 00:00:00 2001
From: Andrei Luca <1881266+iamandrewluca@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:31:35 +0200
Subject: [PATCH] feat(vue): allow to change global/inject route name

Closes #796
---
 README.md         | 24 ++++++++++++++++++++++++
 src/js/index.d.ts |  2 ++
 src/js/index.js   | 14 ++++++++++----
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index eeccb068..83d71007 100644
--- a/README.md
+++ b/README.md
@@ -388,6 +388,17 @@ const route = inject('route');
 </script>
 ```
 
+With `<script setup lang="ts">` you can use TypeScript to type the `route` function:
+
+```vue
+<script setup>
+import { inject } from 'vue';
+import { route as routeFn } from 'ziggy-js'
+
+const route = inject<typeof routeFn>('route')
+</script>
+```
+
 If you are not using the `@routes` Blade directive, import Ziggy's configuration too and pass it to `.use()`:
 
 ```js
@@ -409,6 +420,19 @@ declare module 'vue' {
 }
 ```
 
+If you want to change the name of the `route` global or inject, you can pass a custom name to the `ZiggyVue` plugin:
+
+```js
+createApp(App).use(ZiggyVue, {
+    globalRouteFnName: '$route', // Default is `"route"`
+    injectRouteFnName: '$route', // Default is `globalRouteFnName`
+});
+```
+
+> [!NOTE]
+> If changing the `globalRouteFnName`, make sure to update `ComponentCustomProperties` in your `.d.ts` file accordingly.
+> If changing the `injectRouteFnName`, make sure to update the `inject` call in your Vue components accordingly.
+
 ### React
 
 Ziggy includes a `useRoute()` hook to make it easy to use the `route()` helper in your React app:
diff --git a/src/js/index.d.ts b/src/js/index.d.ts
index ddd20f8f..f8fc5cd9 100644
--- a/src/js/index.d.ts
+++ b/src/js/index.d.ts
@@ -158,6 +158,8 @@ interface Config {
         pathname?: string;
         search?: string;
     };
+    globalRouteFnName?: string;
+    injectRouteFnName?: string;
 }
 
 /**
diff --git a/src/js/index.js b/src/js/index.js
index 1d2c802b..20384c78 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -7,17 +7,23 @@ export function route(name, params, absolute, config) {
 }
 
 export const ZiggyVue = {
-    install(app, options) {
+    install(app, pluginOptions = {}) {
+        const {
+            globalRouteFnName = 'route',
+            injectRouteFnName = globalRouteFnName,
+            ...options
+        } = pluginOptions;
+
         const r = (name, params, absolute, config = options) =>
             route(name, params, absolute, config);
 
         if (parseInt(app.version) > 2) {
-            app.config.globalProperties.route = r;
-            app.provide('route', r);
+            app.config.globalProperties[globalRouteFnName] = r;
+            app.provide(injectRouteFnName, r);
         } else {
             app.mixin({
                 methods: {
-                    route: r,
+                    [globalRouteFnName]: r,
                 },
             });
         }