Custom `uri` breaks Vue routes

[alanwillms]

I am able to change Horizon routes:

https://github.com/laravel/horizon/blob/1f928128822a13289ae5a85b2224583837537a18/src/HorizonServiceProvider.php#L52

But the Vue application expects a fixed /horizon base path:

https://github.com/laravel/horizon/blob/1.0/resources/assets/js/router.js#L8

An ugly fix is to:

• Remove history mode from the Vue router
• Change API calls to use a relative path this.$http.get("./api/......

Related PR: #223

[thierry2015]

Here is a temporary workaround: manually compile JS files and edit Vue and axios constructor to force custom configuration. Example from (laravel-5.7-project)/resources/js/horizon.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import _ from 'lodash';

// Manually edit the horizon prefix
// Only prefix since the horizon URL is hardcoded in Vue components $http calls
const HORIZON_PREFIX = '/admin';

// Force router base URL in a vue instance that is using a router
const vueInit = Vue.prototype._init;
Vue.prototype._init = function(options = {}, ...args) {
    if (options.router) {
        options.router = new VueRouter(_.merge(options.router.options, {
            base: `${HORIZON_PREFIX}/horizon`
        }));
    }

    return vueInit.bind(this)(options, ...args);
};

// Force Axios to use use the horizon prefix in every relative call
const axiosCreate = axios.create;
axios.create = function(config = {}, ...args) {
    config.baseURL = `${HORIZON_PREFIX}/`;

    return axiosCreate.bind(this)(config, ...args);
};

// Import Laravel Horizon original JS file.
// Overwrite /public/vendor/horizon/js/app.js with the current file from Mix configuration file)
require('./../../vendor/laravel/horizon/resources/assets/js/app');

[mapb1990]

+1

[erayaydin]

There should be workaround for this, other way config('horizon.uri') is unnecessary, so :+1:

[loic-lopez]

Hello,

How to rebuild laravel horizon assets from the main project? Thanks for reply.

[thierry2015]

This file will be compiled by Mix and the output file will overwrite the vendor file: mix.js('resources/js/horizon.js', 'public/vendor/horizon/js/app.js'); To successfully compile Horizon, you will need those dependencies to be added to your package.json

[loic-lopez]

Thanks @thierry2015

[driesvints]

Since this was removed from the current release I'm going to close this. We still have plans to implement this eventually.