JavaScript (Vue) & Laravel API naming convention conflict

@xis json api's should respond with camelCase.

If you use API Resources you can do this on a model per model basis

https://laravel.com/docs/8.x/eloquent-resources

eg..

/**
 * Transform the resource into an array.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function toArray($request)
{
    return [
        'id' => $this->id,
        'firstName' => $this->first_name,
        'lastName' => $this->last_name,
    ];
}

to convert to snake_case on the way back in, you can do:

use Illuminate\Support\Str;

$converted = Str::snake('fooBar');

although, I would be explicit and just manually convert

eg

$model = Foo::create(
    [
        'first_name' => $request->firstName,
        'last_name' => $request->lastName
    ]
)

json api's should respond with camelCase.

Should they…?

@xis You’re going to get casing conflicts somewhere down the line. Don’t let your front-end dictate your naming conventions server-side. Because if you accommodate one client, then you’ll find another that wants something different, and then you end up trying to appease multiple masters.

I personally use snake_case because that’s what I use for request input as well. So it makes sense to output the same case in responses as you ask for in requests. It’s a bit weird to use snake_case input names, but then return those same responses with camelCase keys.

So thinking along those lines, treat input names as exactly that: input names and not JavaScript variables. I have a Form object that I use to encapsulate data that gets sent to an external URL that’s based on Spark’s SparkForm object:

export default {
    data() {
        return {
            form: new Form({
                name: null,
                email: null,
                phone_number: null,
            }),
            someDataKey: null,
            someOtherDataKey: null,
        };
    },
};

I’ll use snake_case for inputs that require them, and camelCase anywhere else. And it’s fine to do so. No one will come and tell you off.

Just remember, if this were a third-party API you wouldn’t have the luxury of being able to pick case. If the API told you they accept snake_case, then that’s what you’d have to send, regardless of what you wanted to use in your JavaScript.