Category: Vue

V-once This directive is not for everyday use like v-if, v-for, or v-model. It is a very targeted performance & optimization tool that says: “Render this element (and everything inside it) only once, when...

V-pre This directive is not something you use every day (unlike v-if, v-for, v-model, v-bind, @click…). It is a very targeted escape hatch that tells Vue: “Do not compile anything inside this element (or...

V-show This directive is very similar to v-if, but it solves the same problem in a completely different way, and knowing when to choose v-show over v-if (and vice versa) is one of the...

V-slot directive (often written with its beautiful shorthand #) This is the modern, official way (since Vue 2.6 / Vue 3) to work with slots — replacing the older slot=”name” and slot-scope syntax. v-slot...

V-text This directive is not one of the flashy ones like v-for, v-model or v-if — it doesn’t get much spotlight, but it solves a very specific, very real problem in a clean and...

Vue Instance Options (also called Options API, component options object, or simply the options object) This is the classic way of defining a Vue component — the way Vue started, the way millions of...

The data option This is the original, classic way to define local reactive state in a Vue component — the way Vue worked from day one (Vue 1 → Vue 2 → early Vue...

The methods option This is the original, classic way to define functions (methods) inside a Vue component — the way Vue worked from the very beginning (Vue 1 → Vue 2 → early Vue...

The computed option This is the original, classic way to define derived / calculated values that automatically stay in sync with other reactive data. It is still extremely common in legacy codebases, in many...

The watch option This is the original, classic way to react to changes in reactive data (props, data, computed properties, etc.). Even in 2026 — when almost every new project uses <script setup> +...