Vue (Stack) code review rules

Never use `v-if` on the same element as `v-for`.

Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the `v-html` directive, unless the content is known to be safe or has been properly sanitized.

For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.

In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).

`key` with `v-for` is *always* required on components to maintain internal component state down the subtree. Even for elements, it's good practice for predictable behavior like object constancy in animations.

Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as `Base`, `App`, or `V`.

Whenever a build system is available to concatenate files, each component should be in its own file.

Component names in JS/JSX should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.

In most projects, component names should always be PascalCase in Single-File Components and string templates - but kebab-case in in-DOM templates.

Component options (like `name`, `props`, `data`, `computed`, `methods`, lifecycle hooks, etc.) should be ordered consistently according to a predefined sequence.

Directive shorthands (`:` for `v-bind:`, `@` for `v-on:` and `#` for `v-slot`) should be used always or never.

Attributes within an element tag (including components) should be ordered consistently according to a predefined sequence (e.g., definitions, list rendering, conditionals, unique attributes, binding, events, content).

Avoid using element selectors (e.g., `button {... }`) directly within `<style scoped>`. Prefer class selectors.

Consider adding one empty line between multi-line properties (like complex `props`, `computed`, `methods`, `watch` objects) within the component options, especially in large components.

Component names should prefer full words over abbreviations.

Avoid implicit communication between parent and child components, such as using `this.$parent`, `this.$root`, or directly mutating props received from the parent. Prefer explicit communication via props down and events up.

Elements with multiple attributes should span multiple lines, with one attribute per line.

Component names should start with the highest-level (often most general) words and end with descriptive modifying words.

Use `const` for all references by default within Vue components (e.g., imports, non-reassigned variables, refs obtained via `ref()`). Use `let` only when reassignment of the variable itself is necessary (rare for state). Avoid `var` entirely.

Use arrow functions (`=>`) for anonymous functions like callbacks (e.g., in lifecycle hooks, watchers, event handlers, array methods) instead of the `function` keyword, especially when needing lexical `this`.

Prop names should always use camelCase during declaration. When used inside in-DOM templates, props should be kebab-cased. Single-File Components templates and JSX can use either kebab-case or camelCase props. Casing should be consistent.

Non-empty HTML attribute values should always be inside quotes (single or double, whichever is not used in JS).

Components with no content should be self-closing in Single-File Components, string templates, and JSX - but never in in-DOM templates.

Complex computed properties should be split into as many simpler properties as possible.

Component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.

Filenames of Single-File Components should either be always PascalCase or always kebab-case.

The top-level tags (`<script>`, `<template>`, `<style>`) in Single-File Components (.vue files) should be ordered consistently across the project. A common convention is `<script>`, then `<template>`, then `<style>`.

Child components that are tightly coupled with their parent should include the parent component name as a prefix.

Use object and array destructuring to access properties from objects (like `props`, `this`, context in `setup`) or elements from arrays, especially when accessing multiple items.

Always use ES Modules (`import` and `export`) for managing dependencies and organizing code in Vue applications. Avoid non-standard module systems or global namespace pollution.

When emitting custom events with data using `$emit`, pass an object literal as the payload instead of a raw primitive value, especially if there's a chance more data might be needed later.

Utilize object method shorthands, property value shorthands, and computed property names when defining objects (e.g., in `data`, `computed`, `methods`). Prefer object spread syntax (`...`) over `Object.assign` for shallow copies or merging objects.

Enforces consistent usage of hyphenated (kebab-case) or non-hyphenated (camelCase) attribute names on custom components in templates.