Naming Conventions #

Laravel (Backend – PHP) #

• Use snake_case for:
  • Database columns
  • Eloquent attributes

return [
  'first_name' => $user->first_name,
  'email_address' => $user->email_address,
];

• Use camelCase when passing data to Vue components (see below).

Eloquent JSON Serialization #

• Relationships and accessors are automatically serialized in snake_case.
• This behavior is documented here:
  Laravel Docs – Eloquent Serialization

Vue.js (Frontend – Inertia.js + useForm) #

• Use snake_case in useForm() and camelCase for props coming from Laravel:

return Inertia::render('UserDashboard/Index', compact(['firstName', 'emailAddress']));

const props = defineProps(['firstName', 'lastName]);

const form = useForm({
  first_name: props.firstName,
  email_address: props.emailAddress,
});

Why this inconsistency?

• JavaScript prefers camelCase.
• Blade/HTML forms historically use snake_case, which aligns with $request->input('first_name') in Laravel.
• Older Inertia versions auto-converted snake_case from controller to camelCase, but that “magic” was removed due to many issues surrounding this behaviour.
• Today, be explicit and consistent.

Component Naming in Vue #

For props and components in templates, prefer camelCase in JSX and kebab-case in DOM templates. But Vue 3 no longer enforces this strictly.

<WelcomeMessage greetingText="Hi" />

Request Handling (Form Submission) #

$request->input('first_name');

Working with DTOs #

• DTOs at Laravel should generally use camelCase for DTO keys

✅ Tip: Consistency Table #