⚙️ 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

🔖 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:

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.