Як потрібно давати назви компонентам на Vue 3?

У Vue 3 назви компонентів відіграють важливу роль у забезпеченні чистого, зрозумілого та підтримуваного коду. Є декілька рекомендацій і найкращих практик щодо іменування компонентів у Vue 3:

1. Кебаб-кейс для реєстрації компонентів у шаблонах

У шаблонах компоненти мають бути названі в кебаб-кейсі (kebab-case), де всі літери пишуться в нижньому регістрі, а слова розділяються дефісами.

Приклад:

<my-component></my-component>

2. Паскаль-кейс або Кемел-кейс у файлах і компонентах

У коді компонентів (файлах або при імпорті) рекомендується використовувати Паскаль-кейс (PascalCase), коли кожне слово починається з великої літери. Можна також використовувати Кемел-кейс (camelCase), але Паскаль-кейс є найбільш поширеним варіантом.

Приклад:

export default {
  name: 'MyComponent',
}

3. Імена, що описують призначення компонента

Назва компонента повинна бути інформативною та чітко відображати його роль або функцію. Використовуйте описові назви, уникайте занадто загальних слів.

Невдалий приклад: Button.vue
Вдалий приклад: SubmitButton.vue

4. Префікси для глобальних компонентів

Якщо компонент глобальний або використовується як частина бібліотеки, доцільно використовувати префікс для уникнення конфліктів і покращення читабельності.

Приклад:

app.component('BaseButton', BaseButton)

5. Модульність і неймінг

Компоненти можуть бути згруповані за функціональними модулями, і в цьому випадку добре використовувати префікси або суфікси, щоб вказати їх належність до певної групи або модуля.

Приклад:

// Компоненти, що стосуються користувачів
UserList.vue
UserProfile.vue

6. Уникнення зарезервованих слів

Уникайте використання в назвах компонентів слів, які можуть конфліктувати з зарезервованими словами або вбудованими функціями браузера (наприклад, div, span, button).

7. Імена компонентів з кількох слів

Для більшої ясності, імена компонентів повинні складатися з кількох слів, щоб уникнути конфліктів з елементами HTML. Використовуйте хоча б два слова в назві компонента.

Приклад:

// Невдалий приклад
name: 'Button'

// Вдалий приклад
name: 'SubmitButton'

Підсумок

• Кебаб-кейс для шаблонів.
• Паскаль-кейс для файлів і назви компонента.
• Чіткі, інформативні імена.
• Префікси для глобальних або загальних компонентів.
• Уникнення використання зарезервованих слів.

Дотримання цих правил полегшить підтримку проекту, збільшить його зрозумілість і уникне потенційних конфліктів.