Laravel + Inertia + Vue.js Duplicates App_URL into url

Question

I have been working on a Laravel 8 Inertia and Vue.js project for a couple of weeks without this problem. My files were residing in C:\Users[my_user]\laravel. I was using the artisan command serve where it was opening 127.0.0.1:8080 as the local development server -- everything was fine. I decided that it was time to transfer the files to apache's http://localhost/laravel where I would use xampp to open the project instead of Laravel php artisan command serve. I have inspected my routes, Controllers, passed the Inertia::render() command, reached app.js without any problem. but when I run the createInertiaApp() I get url part being duplicated I guess by Inertia and not vue.js Here is the code I am having in my app.js

console.log('Still working well without duplicating url')

createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
    return createApp({ render: () => h(app, props) })
        .use(plugin)
        .component('Link', Link)
        .component('Head', Head)
        .mixin({ methods: { route } })
        .mount(el);
},
});

NB: when I comment the createInertiaApp code, the home url will be perfectly http://localhost/laravel, but when I run the createInertiaApp I get http://localhost/laravel/laravel/

The project works well in localhost but not localhost/laravel. I set up APP_URL and ASSET_URL correctly in both cases. — felixkpt
– felixkpt, Commented Mar 3, 2022 at 2:22
It works perfectly fine when you're serving from server root directory. Serving from a subdirectory creates this issue. Or you can create a new apache vhost to point to the project public directory. — Imtiaz
– Imtiaz, Commented Sep 9, 2022 at 17:33

kavilian · Accepted Answer · 2022-03-03 11:33:17Z

10

I'm facing the same problem. I'm using Nginx, Laravel Jetstream with Inertia stack and I'm working on a local environment. What I get when I request a url e.g. 192.168.1.204:5500/helpdesk/public/login is 192.168.1.204:5500/helpdesk/public/helpdesk/public/login. Urls appear normal when I use php artisan serve. What I have noticed is that the issue lies on /vendor/inertiajs/inertia-laravel/src/Response.php toResponse() method and in particular in the following piece of code:

$page = [
        'component' => $this->component,
        'props' => $props,
        //'url' => $request->getBaseUrl().$request->getRequestUri(),
        'url' => $request->getRequestUri(),
        'version' => $this->version,
    ];

If you replace $request->getBaseUrl().$request->getRequestUri() with $request->getRequestUri() the problem should go away. But I think there must be a much better/cleaner way to do that. I hope someone else can provide more help on that.

Actually the above code was changed when support to Laravel 9 was added to inertia/laravel: https://github.com/inertiajs/inertia-laravel/pull/347/commits/bf059248ab73bcaccbea057d0a9fa11446fa0e20.

There is also an issue opened for this: https://github.com/inertiajs/inertia-laravel/pull/360.

edited Mar 3, 2022 at 11:33

answered Mar 3, 2022 at 10:00

kavilian

1161 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

felixkpt Over a year ago

Thanks a lot kavilian your solution really helped me! I had searched and searched for a solution on google but couldn't find it.

Md Majadul Islam Over a year ago

Its working fine by inertiaJS, Reactjs & laravel 9

Neha Over a year ago

Is it ok to change vendor file functions ?

Collectives™ on Stack Overflow

Laravel + Inertia + Vue.js Duplicates App_URL into url

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related