In Programming, there are two extremely challenging tasks: cache invalidation and naming things. Today, we will dive into the latter as we explore the art of naming props for Vue components.

When it comes to naming props, it is essential to follow established conventions for variable names. For example, utilize lower camel case (isEnabled) and keep the names short (less than 30 characters).

However, Vue has its own set of best practices that we should follow. Let’s talk about some tips based on my experience working with it.

1. Content-Aware Naming

It’s important to maximize the information conveyed by the variable name to minimize confusion and make skimming a component easier.

▹ For arrays, opt for plural nouns as variable names, such as items. This choice immediately suggests that the variable represents a collection or group of related elements.

▹ When dealing with numbers, employ prefixes like num or postfixes like count and index to imply numeric values. For example numItems, itemCount, and itemIndex, provide clear indications of the variable’s numeric nature.

▹ When working with objects, use appropriate singular nouns, such as item.

▹ For booleans, use descriptive prefixes like is, can, and has to convey visual or behavioural variations:

• is is ideal for signifying visual or behavioral states, like isVisible, isEnabled, or isActive.

• can signifies behavioural variations or conditional visual changes. Consider prop names like canToggle or canExpand to clearly express component capabilities.

• has indicates the presence of UI elements. Use prefixes like hasCancelButton or hasHeader to indicate whether specific UI elements are present or visible.

2. Descriptive Naming

▹ Props should describe the component itself, focusing on what it does rather than why it does it. Avoid naming props after the current user or environment.

For example:

▹ Instead of hasSubmitPermission, consider hasSubmitButton.

    <MyForm hasSubmitButton="user.canSubmit" />

▹ Rather than isMobileScreen, opt for isCompactLayout.

    <MyForm isCompactLayout="browser.isMobileScreen" />

▹ Avoid naming props after child components. If the props are meant to be passed down to children, use names that describe the component itself.

▹ Use instead of .

▹ Instead of areCommentsLoading, choose isLoadingComments.

▹ Describing the existence of a child component can be misleading. If the goal is to create more space for an icon rather than toggling its presence, consider using isSpacious instead of hasIcon. Remember, hasIcon answers the question of why, not what.

3. Event Handler Props

▹ Prepend on to the prop names that represent event handlers (e.g. onSelect, onClick).

▹ Utilize the handle prefix for handler functions.

    <MyComp @onClick="handleClick" />

▹ Avoid using built-in event handler prop names for custom events. If the native focus/click event is not relevant, use custom names like onSelect instead of onFocus or onClick.

By following these guidelines, you can establish a consistent and meaningful naming convention for props in your Vue application. Thoughtful prop names contribute to better code readability and maintainability, making it easier for you and your team to collaborate effectively.