DOCSEARCHbyAlgolia
Submit Docs

Vue.js Documentation

website·Indexed 19 days ago

https://vuejs.org/

Official documentation for Vue 3, covering the progressive JavaScript framework's core features. Includes guides on template syntax, reactivity fundamentals using ref() and reactive(), computed properties, watchers, and component architecture (props, events, slots, and provide/inject). Detailed sections on the Composition API, composables, lifecycle hooks, custom directives, plugins, and the <Transition> component.

Tokens
95.9K
Snippets
564
Records
747
Agent score
96%

What's inside Vue.js

  1. Overview of Vue compile-time flags

    Compile-time flags allow developers to enable or disable specific Vue features during the build process. When a feature is disabled via a flag, it can be removed from the final bundle through tree-shaking, reducing the bundle size. These flags only apply when using the esm-bundler build of Vue (vue/dist/vue.esm-bundler.js). While Vue works without explicit configuration, defining them is recommended for optimal bundle size.

  2. Overview of Vue 3 core features

    Vue is a JavaScript framework for building user interfaces that provides a declarative, component-based programming model. Its two core features are:

    1. Declarative Rendering: Extends standard HTML with a template syntax to describe HTML output based on JavaScript state.
    2. Reactivity: Automatically tracks JavaScript state changes and efficiently updates the DOM.
    import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
    <div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

  3. Overview of Reactivity Transform

    Reactivity Transform is a compile-time transform for the Composition API that allows developers to treat refs as 'reactive variables'. This removes the need to use .value when accessing or assigning refs in <script setup>.

    CRITICAL STATUS: This was an experimental feature and was removed from Vue core in version 3.4. To use this functionality in newer versions, you must use the Vue Macros plugin.

  4. Overview of Vue Composition API

    The Composition API is a set of APIs that allows developers to author Vue components using imported functions instead of declaring options. It is a built-in feature of Vue 3 and Vue 2.7. For older Vue 2 versions, the @vue/composition-api plugin is required. In Vue 3, it is primarily used with the <script setup> syntax in Single-File Components.

    It consists of three main pillars:

    1. Reactivity API: Functions like ref() and reactive() for creating reactive state, computed state, and watchers.
    2. Lifecycle Hooks: Functions like onMounted() and onUnmounted() to hook into the component lifecycle.
    3. Dependency Injection: provide() and inject() for leveraging Vue's dependency injection system.

    Note: Composition API is based on Vue's mutable, fine-grained reactivity paradigm and is NOT functional programming.

    <script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

  5. Apply enter and leave animations with the <Transition> component

    The <Transition> component is a built-in Vue component used to apply enter and leave animations to a single element or component passed via its default slot. Transitions are triggered by conditional rendering (v-if), conditional display (v-show), dynamic component toggling (<component>), or changes to the key attribute.

    Constraint: <Transition> only supports a single element or component as its slot content. If a component is used, it must have a single root element.

    <button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

  6. Use v-model for two-way form input binding

    The v-model directive simplifies the process of syncing the state of form input elements with JavaScript state. It replaces the need to manually bind a :value and listen for @input or @change events.

    v-model automatically maps to different DOM properties and events based on the element:

    • <input> (text types) and <textarea>: uses value property and input event.
    • <input type="checkbox"> and <input type="radio">: uses checked property and change event.
    • <select>: uses value prop and change event.

    Important Note: v-model ignores initial value, checked, or selected attributes on HTML elements. The JavaScript state is always the source of truth; initial values should be declared in the component's data or reactivity API.

    <!-- Manual way -->
<input
  :value="text"
  @input="event => text = event.target.value">

<!-- Simplified with v-model -->
<input v-model="text">

  7. Compare Vue with Web Components

    Vue is a high-level framework that provides features not natively covered by the low-level Web Components specifications, such as efficient DOM rendering, reactive state management, tooling, client-side routing, and server-side rendering. While Vue's design (e.g., slots) was inspired by the Web Components model, it remains a separate framework that fully supports both consuming native custom elements and exporting Vue components as native custom elements.

  8. Prevent arbitrary code execution by using trusted templates

    The most fundamental security rule in Vue is to never use non-trusted content as a component template. Because Vue templates are compiled into JavaScript, allowing user-provided strings to define the template is equivalent to allowing arbitrary JavaScript execution. This is especially dangerous during server-side rendering as it could lead to server breaches.
    // NEVER DO THIS
Vue.createApp({
  template: `<div>` + userProvidedString + `</div>` 
}).mount('#app')

  9. Orchestrate async dependencies with <Suspense>

    <Suspense> is an experimental built-in component used to coordinate async dependencies in a component tree. It allows a developer to display a single top-level loading state while waiting for multiple nested async dependencies to resolve, preventing multiple loading spinners from appearing independently across the page. It supports two types of async dependencies: components with an async setup() hook (including <script setup> with top-level await) and Async Components.

  10. Understand Vue's release cycle and versioning

    Vue follows Semantic Versioning (semver) with the following release patterns:

    • Patch releases: Released as needed for bug fixes.
    • Minor releases: Contain new features, typically released every 3-6 months. They always undergo a beta pre-release phase.
    • Major releases: Announced in advance and undergo early discussion, alpha, and beta phases.

    Deprecations: Features may be deprecated in minor releases. Deprecated features remain functional until they are removed in the subsequent major release.

  12. Vue Single-File Component (SFC) Structure Overview

    A Vue Single-File Component (SFC) uses the *.vue extension and is syntactically compatible with HTML. It consists of three primary top-level language blocks—<template>, <script>, and <style>—and optional custom blocks.
    <template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>