Laravel Vue DELETE method not supported for this route. Supported methods: GET, HEAD

Question

I have the following code in my actions.js.

export const deleteUser = ({ dispatch }, payload) => {
    console.log("El numero de id es js: ", payload.id);
    return axios
        .delete(window.urls.user.delete(payload.id))
        .then(respone => {
            dispatch("fetchUsers");
            return Promise.resolve();
        })
        .catch(error => {
            return Promise.reject(error);
        });
};

api.php

Route::delete('/{user}', [
    'uses' => 'UserController@destroy',
    'middleware' => 'permission:user.delete',
    'can:delete,user'    
]);

config.blade.php

user: {
            index : '/user',
            store: '/user',
            update: function(userid){
                return '/user/' + userid
            },
            delete: function(id){
                return '/user/' + id;
            }
        }, 

Controller

public function destroy(Request $request, $id)
{
    $user = User::find($id);
    $user->delete();
}

Answer 1

I think the problem is your user route definition. Assuming you don't use route grouping instead of

Route::delete('/{user}', [
            'uses' => 'UserController@destroy',
            'middleware' => 'permission:user.delete',
            'can:delete,user'    
        ]);

you should try:

Route::delete('/user/{user}', [
            'uses' => 'UserController@destroy',
            'middleware' => 'permission:user.delete',
            'can:delete,user'    
        ]);