Component Naming and Design

10.2.1. File Names

Target	Convention	Example
Component files	PascalCase	UserProfile.vue
Composable files	camelCase, use prefix	useUser.ts
Store files	camelCase, use prefix	useUserStore.ts
Utilities	camelCase	formatDate.ts
Type definitions	camelCase	user.ts

---

10.2.2. Component Usage

When using components in templates, PascalCase must be used.

<!-- Correct -->
<UserProfile :user="currentUser" />

<!-- Incorrect -->
<user-profile :user="currentUser" />

---

10.2.3. Props Definition

• Props must have their types specified in defineProps.
• Use withDefaults when default values are needed.
• Props names must be defined in camelCase.

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => [],
})
</script>

---

10.2.4. Emits Definition

• Emits must have event signatures specified in defineEmits.
• Event names must use camelCase.
• Payload types must be explicitly defined.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string]
  delete: [id: number]
  submit: [data: FormData]
}>()

function handleSubmit(data: FormData) {
  emit('submit', data)
}
</script>

---

10.2.5. Slot Patterns

• Default slots are used for layout components.
• Named slots are used for composite layouts.
• Scoped slots are used for data delegation patterns.

<!-- Layout component -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body">
      <slot />
    </div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </div>
</template>