Vue.js and Element‑plus Code Style and Naming Conventions

The article explains that in collaborative Vue.js or Element‑plus projects, developers often adopt different naming styles for functions, enums, and variables, leading to inconsistent codebases.

It showcases three enum styles extracted from the Vue.js source:

// Type结尾
enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2,
}
// Types结尾
enum OptionTypes {
  PROPS = 'Props',
  DATA = 'Data',
  COMPUTED = 'Computed',
  METHODS = 'Methods',
  INJECT = 'Inject',
}
// 枚举项使用pascalCase
enum BooleanFlags {
  shouldCast,
  shouldCastTrue,
}

Based on a review of Vue and Element‑plus source code, the author lists 30 code‑style recommendations, divided into Vue‑related and generic JavaScript rules.

Directory Naming – Use kebab‑case for module names (e.g., compiler-core , compiler-dom ) and keep the root module as the first word. Folder names should also follow kebab‑case and be plural when appropriate (e.g., components , utils ).

//BAD
compilerCore
compilerDom
compilerSSR

// GOOD
vue
vue-compat
compiler-core
compiler-dom
compiler-ssr
compiler-sfc
runtime-core
runtime-dom
runtime-test

Component Naming – Component folders use kebab‑case, usually no more than two or three words (e.g., checkbox-button.vue , search-input.vue ). Prefix related components with the parent name (e.g., todo-list-item.vue ).

dropdown
dropdown-item
dropdown-menu
checkbox
checkbox-button
checkbox-group

Component File Structure – Place <script> at the top, followed by <template> and <style> . Order script sections as props, emits, refs, computed, watch, methods, events.

<script setup lang="ts">
...
</script>
<template>
...
</template>
<style lang="less" scoped>
...
</style>

Attribute and Directive Usage – Use double quotes for HTML/template attributes, single quotes for JavaScript strings, and keep line‑ending consistent (all with or all without semicolons). Prefer shorthand syntax for directives (e.g., : instead of v-bind: , @ instead of v-on: , # instead of v-slot: ).

// BAD
v-bind:value="newTodoText"
:placeholder="newTodoInstructions"

// GOOD
: value="newTodoText" :placeholder="newTodoInstructions"

// BAD
v-on:input="onInput" @focus="onFocus"

// GOOD
@input="onInput" @focus="onFocus"

// BAD
v-slot:header

// GOOD
#header

Boolean Naming – Prefix boolean variables with is or has (e.g., isString , hasFallback ).

isString
isStatic
isSlot
isMemberExpressionBrowser
isSimpleIdentifier
isCompatEnabled
hasFallback
hasVnodeHook
hasStyleBinding

Function Naming – Use lowerCamelCase verbs for business methods (e.g., createObjectMatcher , parseWithForTransform ) and on or handle prefixes for event handlers.

createObjectMatcher(obj: Record<string, any>)
parseWithForTransform(...)
onClick
handleIconClick

Class Naming – Use PascalCase, optionally combining nouns, adjectives, or verbs (e.g., TypeScope , BaseReactiveHandler , ScriptCompileContext ).

export class TypeScope { }
export class BaseReactiveHandler { }
export class ScriptCompileContext { }

Constant Naming – Upper‑case with underscores, often plural or descriptive (e.g., PURE_ANNOTATION , DAYS_IN_WEEK ).

const PURE_ANNOTATION = `/*#__PURE__*/`
const DAYS_IN_WEEK = 7
const MAX_DOG_WEIGHT = 150

Enum Naming – PascalCase for enum names, values in upper case with underscores; suffixes like Types , Codes , Flags indicate collections, while verb‑noun pairs indicate actions.

export enum Namespaces { HTML, SVG, MATH_ML }
export enum ErrorCodes { ABRUPT_CLOSING_OF_EMPTY_COMMENT, CDATA_IN_HTML_CONTENT }
export enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive' }
export enum MoveType { ENTER, LEAVE, REORDER }

The conclusion stresses that a well‑defined code style improves readability, reduces onboarding cost, and leaves a positive impression during code reviews or interviews.