Category: Vue

The <Transition> component This is Vue’s built-in, zero-dependency wrapper that makes almost any enter/leave or appear/disappear animation feel smooth and professional — with almost no JavaScript. You will use <Transition> (and its bigger brother...

Vue’s <TransitionGroup> component — one of the most satisfying and most frequently used animation tools in real Vue applications. This is the specialized version of <Transition> that exists only for lists — that is,...

Vue Built-in Elements (also called built-in special tags or reserved template elements). These are very special HTML-like tags that Vue treats in a magical way. They are not normal HTML elements — they don’t...

The <component> element (used almost exclusively with the :is attribute → <component :is=”…”>) This is not a normal HTML tag — it’s a special placeholder that Vue provides so you can dynamically decide at...

The <slot> element This is not just another HTML tag — it’s a special placeholder that Vue understands and replaces with content provided by the parent component. In simple human words: The child component...

The <template> element This is not just some random HTML tag — it is the heart of how Vue turns your declarative markup into a reactive, live user interface. In a .vue file, the...

The Vue Component Instance This is not the same as the component definition (the .vue file or object you write), nor is it the same as the HTML tag you use in templates. A...

The $attrs object (also written as v-bind=”$attrs” or simply “the attrs object”) This is not the same as props — it’s the second half of the story when a parent passes attributes to a...

The $data object This is not something you use often in modern Vue 3 code, but it still exists, and understanding it properly will save you from a lot of confusion when you read...

The $el object (also written as this.$el in Options API or accessed via template refs in Composition API) This is not something you use every day in modern Vue 3 code — but understanding...