Use keyed v-for

key with v-for is always required on components, in order to maintain internal component state down the subtree. Even for elements though, it's a good practice to maintain predictable behavior.

Avoid v-if with v-for

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

Base component names

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.

Full-word component names

Component names should prefer full words over abbreviations.

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Directive shorthands

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

Element selectors with scoped

Element selectors should be avoided with scoped.

Prefer class selectors over element selectors in scoped styles, because large numbers of element selectors are slow.