Add flexible route configuration

config/vapor-ui.php

@@ -24,6 +24,32 @@
         EnsureUpToDateAssets::class,
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Vapor UI Domain
+    |--------------------------------------------------------------------------
+    |
+    | This is the subdomain where Vapor UI will be accessible from. If this
+    | setting is null, Vapor UI will reside under the same domain as the
+    | application. Otherwise, this value will serve as the subdomain.
+    |
+    */
+
+    'domain' => env('VAPOR_UI_DOMAIN', null),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Vapor UI Path
+    |--------------------------------------------------------------------------
+    |
+    | This is the URI path where Vapor UI will be accessible from. Feel free
+    | to change this path to anything you like. Note that the URI will not
+    | affect the paths of its internal API that aren't exposed to users.
+    |
+    */
+
+    'path' => env('VAPOR_UI_PATH', 'vapor-ui'),
+
     /*
     |--------------------------------------------------------------------------
     | Vapor UI Queues

resources/js/app.js

@@ -19,7 +19,7 @@ moment.tz.setDefault('utc');
 const router = new VueRouter({
     routes: Routes,
     mode: 'history',
-    base: '/vapor-ui',
+    base: '/' + window.VaporUi.path,
 });
 
 router.beforeEach((to, from, next) => {

resources/js/components/Search.vue

@@ -342,7 +342,7 @@ export default {
 
             this.searching = true;
             return axios
-                .get(`/vapor-ui/api/${this.$route.meta.resource}/${this.group}`, { params })
+                .get(`/${window.VaporUi.path}/api/${this.$route.meta.resource}/${this.group}`, { params })
                 .catch(({ response }) => {
                     this.searching = false;
                     this.troubleshooting = true;

resources/js/components/SearchDetails.vue

@@ -114,10 +114,13 @@ export default {
      */
     mounted() {
         axios
-            .get(`/vapor-ui/api/${this.$route.meta.resource}/${this.$route.params.group}/${this.$route.params.id}`, {
-                params: this.$route.query,
-                validateStatus: false,
-            })
+            .get(
+                `/${window.VaporUi.path}/api/${this.$route.meta.resource}/${this.$route.params.group}/${this.$route.params.id}`,
+                {
+                    params: this.$route.query,
+                    validateStatus: false,
+                }
+            )
             .then(({ data }) => {
                 this.ready = true;
                 this.entry = data;

resources/js/screens/jobs/metrics.vue

@@ -198,7 +198,7 @@ export default {
             this.$router.push({ query: Object.assign({}, this.$route.query, this.filters) }).catch(() => {});
 
             return axios
-                .get('/vapor-ui/api/jobs/metrics', {
+                .get(`/${window.VaporUi.path}/api/jobs/metrics`, {
                     params: this.filters,
                 })
                 .then(({ data }) => {

resources/js/screens/jobs/show.vue

@@ -218,7 +218,7 @@ export default {
                 1000
             );
 
-            axios.post(`/vapor-ui/api/jobs/failed/${action}/${entry.id}`).then(then);
+            axios.post(`/${window.VaporUi.path}/api/jobs/failed/${action}/${entry.id}`).then(then);
         },
     },
 };

resources/views/layout.blade.php

@@ -118,6 +118,7 @@ class="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-gray
         <!-- Global Telescope Object -->
         <script>
             window.VaporUi = @json([
+                'path' => $path,
                 'queues' => $queues,
             ]);
         </script>

routes/web.php

@@ -6,8 +6,7 @@
 use Laravel\VaporUi\Http\Controllers\JobMetricController;
 use Laravel\VaporUi\Http\Controllers\LogController;
 
-Route::prefix('vapor-ui')
-    ->middleware('vapor-ui')
+Route::middleware('vapor-ui')
     ->group(function () {
         Route::get('/api/logs/{group}', [LogController::class, 'index']);
         Route::get('/api/logs/{group}/{id}', [LogController::class, 'show']);

src/Http/Controllers/HomeController.php

@@ -15,6 +15,7 @@ class HomeController
     public function __invoke()
     {
         return view('vapor-ui::layout', [
+            'path' => config('vapor-ui.path', 'vapor-ui'),
             'queues' => Cloud::queues(),
         ]);
     }

src/VaporUiServiceProvider.php

@@ -23,7 +23,7 @@ public function boot()
     {
         Route::middlewareGroup('vapor-ui', config('vapor-ui.middleware', []));
 
-        $this->loadRoutesFrom(__DIR__.'/../routes/web.php');
+        $this->registerRoutes();
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'vapor-ui');
 
         if ($this->app->runningInConsole()) {
@@ -87,4 +87,19 @@ public function registerClients()
             });
         });
     }
+
+    /**
+     * Register the Vapor UI routes.
+     *
+     * @return void
+     */
+    protected function registerRoutes()
+    {
+        Route::group([
+            'domain' => config('vapor-ui.domain', null),
+            'prefix' => config('vapor-ui.path', 'vapor-ui'),
+        ], function () {
+            $this->loadRoutesFrom(__DIR__.'/../routes/web.php');
+        });
+    }
 }