Flickering of parameters in the address bar (Laravel Jetstream + Vue)

When I generate a URL like this:

http://localhost/admin/users/list?page=2&field=name&direction=asc

and navigate to it, I see a flicker in the address bar, and the parameters switch places:

http://localhost/admin/users/list?direction=asc&field=name&page=2

Controller:

public function list() {
        return Inertia::render('Admin/Users/List', [
            'users' => User::orderBy(request('sort', 'id'), request('direction', 'asc'))
                ->paginate(10)->withQueryString(),
            'direction' => request('direction'),
            'sort' => request('sort'),
        ]);
    }

list.vue:

 router.get(route('admin.users.list'), {
        direction: direction.value,
        page: 1,
        sort: sort.value,
    });

pagination.vue

:href="pagination.prev_page_url"

This results in URLs like:

http://localhost/admin/users/list?direction=asc&page=5&sort=name

Check if the address I came from differs from the one displayed in the browser:

Flickering of parameters in the address bar (Laravel Jetstream + Vue)

When I generate a URL like this:

http://localhost/admin/users/list?page=2&field=name&direction=asc

and navigate to it, I see a flicker in the address bar, and the parameters switch places:

http://localhost/admin/users/list?direction=asc&field=name&page=2

Controller:

public function list() {
        return Inertia::render('Admin/Users/List', [
            'users' => User::orderBy(request('sort', 'id'), request('direction', 'asc'))
                ->paginate(10)->withQueryString(),
            'direction' => request('direction'),
            'sort' => request('sort'),
        ]);
    }

list.vue:

 router.get(route('admin.users.list'), {
        direction: direction.value,
        page: 1,
        sort: sort.value,
    });

pagination.vue

:href="pagination.prev_page_url"

This results in URLs like:

http://localhost/admin/users/list?direction=asc&page=5&sort=name

Check if the address I came from differs from the one displayed in the browser:

• laravel
• vue.js
• inertiajs
• laravel-11

1 Answer 1

It appears to be a known issue which might someday be solved. A pull request was made but has yet to be merged.

Googling for vue url query parameter alphabetical order led me to the issue Query parameters are rearranging on page load #3578 that seems to describe exactly what you are seeing too.

That issue was Closed as a duplicate of Why is it designed as below? it will cause history.replaceState method to be called #3447 which mentions a replaceState function in the Vue framework that perhaps should not be called.

That issue is still Open and is linked to a pull request feat: optimize method to determine whether the two path are the same in ensureUrl methods #3477 that might fix the issue. From a quick glance I think it has to do something with comparing the list of query parameters to decide whether or not they contain the same keys.

It appears the last activity on these issues was in 2021 so it might not be solved anytime soon.

To solve this flicker, maybe you could order the parameters alphabetically yourself?