Component Naming

Single File Components (SFC)

ไฟล์ Vue components ควรใช้ PascalCase และลงท้ายด้วย .vue

<!-- Good -->
<UserProfile.vue>
<AccountSettings.vue>

<!-- Avoid -->
<user-profile.vue>
<accountSettings.vue>

Component Name in Script

เมื่อกำหนดชื่อ component ใน <script setup> ใช้ PascalCase

<script setup lang="ts">
// Good
const name = "UserProfile";

// Avoid
const name = "user-profile";
</script>

Props Naming

Props ควรใช้ camelCase เมื่อประกาศ แต่ kebab-case ใน template

<script setup lang="ts">
// Good
const props = defineProps({
  userData: { type: Object },
});
</script>

<template>
  <!-- ใช้ kebab-case ใน template -->
  <UserProfile :user-data="user" />
</template>

Event Naming

Custom events ควรใช้ kebab-case

<script setup lang="ts">
// Good
const emit = defineEmits(["update:model-value"]);

// Avoid
const emit = defineEmits(["update:modelValue"]);
</script>

Convention Type	Script (<script>)	Template (<template>)	ตัวอย่าง
Component Files	PascalCase (.vue)	-	UserProfile.vue
Component Names	PascalCase	PascalCase	<UserProfile>
Props	camelCase	kebab-case	:user-data="user"
Events	camelCase	kebab-case	@update:model-value
Variables	camelCase	camelCase	const userData = ref()
Slots	camelCase	kebab-case	<template #header-title>
Directives	-	kebab-case	v-model:search-text