---

⚙️ Vue.js Reference Documentation – Explore the Official API Elements (2025)

---

🧲 Introduction – Your Quick Guide to Vue’s Built‑in Features

Every Vue developer—from junior to architect—relies on a solid grasp of Vue’s native API: attributes, components, directives, hooks, and instance options. This reference-style guide serves as your go‑to cheat sheet, helping you quickly navigate the Vue core when building everything from tiny widgets to full-scale SPAs.

🎯 In this guide, you’ll learn:

• The key built‑in attributes (key, ref, is, etc.)
• Core internal components like <transition>, <keep-alive>, <teleport>
• The special-purpose Vue-managed elements
• The structure and properties of a Vue component instance ($el, $data, etc.)
• Initialization options available on createApp or .new Vue()
• A rundown of all Vue directives (v-if, v-for, v-bind, etc.)
• Lifecycle hook order and typical use cases

---

📘 Topics Covered

🧩 Topic	📌 Description
Vue Built‑in Attributes	Core HTML‑enhancing attributes provided by Vue (key, ref, is, etc.)
Vue Built‑in Components	<transition>, <keep-alive>, <teleport> and other compiler-recognized components
Vue Built‑in Elements	Special-purpose root and wrapper elements understood by Vue’s compiler
Vue Component Instance	Internals like $el, $data, $props, $emit, and more
Vue Instance Options	Options you can pass when creating your app (data, methods, mixins, etc.)
Vue Directives Reference	Overview of Vue’s built-in directives and when to use them (v-if/v-for/etc.)
Vue Lifecycle Hooks Reference	List of all hook names (beforeCreate, created, mounted, etc.) and their timing

---

🔖 Vue Built‑in Attributes

• key — uniquely identify elements in lists for efficient diffing
• ref — gain programmatic access to DOM nodes or component refs
• is — dynamic component or element rendering
• Others include slot (Vue 2), v-slot for slot-scoping

---

💡 Vue Built‑in Components

Vue includes these core components out of the box:

• <transition> — wrap single elements/components for entry/exit animations
• <transition-group> — animate multiple items (e.g., list reordering)
• <keep-alive> — cache inactive components, preserving state
• <teleport> — render content outside the current component hierarchy

---

🧩 Vue Built‑in Elements

Vue recognizes special tags like <slot>, <template>, and component tags using the is attribute to wire up advanced rendering and scope behavior.

---

🛠️ Vue Component Instance

Every component instance exposes these built-ins:

• $el — real DOM element reference
• $data, $props — its reactive state
• $emit() — emit custom events
• $refs — locally defined template refs
• $slots / $scopedSlots — content distribution APIs
• $watch() — subscribe to data changes programmatically
• And more like $nextTick(), $options, $parent

---

⚙️ Vue Instance Options

When initializing a Vue root or component, you can specify:

• data, props, computed, methods, and watch
• Lifecycle hooks (created, mounted, etc.)
• components, directives, mixins, extends, provide
• Router, store, plugins, errorCaptured, inheritAttrs, etc.

---

⚡ Vue Directives Reference

Vue directives enrich your template with logic. Core ones include:

• Rendering control: v-if, v-else, v-show
• List rendering: v-for
• Attribute binding: v-bind / :
• Event handling: v-on / @
• Two‑way binding: v-model
• Template control: v-slot, v-text, v-html
• Special: v-pre, v-cloak, v-once

---

⏱️ Vue Lifecycle Hooks Reference

Use these hooks to tap into component timing:

Hook Name	When It Runs
beforeCreate	Instance is being initialized
created	Data and props are reactive
beforeMount	Right before DOM mounting
mounted	Component inserted into DOM
beforeUpdate	After reactive updates but before patch
updated	After component’s DOM has been patched
beforeUnmount	Before component is destroyed
unmounted	After component is torn down

Compose API equivalents: onBeforeMount, onMounted, etc.

---

📌 Summary – Your Vue API Cheat Sheet

• Attributes, components, elements, hooks, and instance options are all first-class Vue APIs.
• Familiarity with these helps you troubleshoot, extend, and build advanced features without diving deep into docs each time.
• Use this guide as your quick reference while coding and refactoring Vue apps.

---

Share Now :