{"id":10429,"library":"vue","title":"Vue.js Framework","description":"Vue.js is a progressive JavaScript framework for building modern user interfaces. The current stable version is 3.5.32. Vue typically releases stable patch versions every few weeks, with minor versions introducing new features and breaking changes every few months, often preceded by beta releases.","status":"active","version":"3.5.32","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/core","tags":["javascript","vue","typescript"],"install":[{"cmd":"npm install vue","lang":"bash","label":"npm"},{"cmd":"yarn add vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"symbol":"createApp","correct":"import { createApp } from 'vue';"},{"symbol":"ref","correct":"import { ref } from 'vue';"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\n\nconst app = createApp({\n  setup() {\n    const message = ref('Hello, Vue 3!');\n    const count = ref(0);\n\n    const increment = () => {\n      count.value++;\n    };\n\n    return {\n      message,\n      count,\n      increment\n    };\n  },\n  template: `\n    <div>\n      <h1>{{ message }}</h1>\n      <p>Count: {{ count }}</p>\n      <button @click=\"increment\">Increment</button>\n    </div>\n  `\n});\n\napp.mount('#app');","lang":"typescript","description":"This quickstart initializes a basic Vue 3 application, demonstrates reactivity with `ref`, and shows how to mount it to an HTML element. Place `<div id=\"app\"></div>` in your HTML to see the output."},"warnings":[{"fix":"Consult the official Vue 3 migration guide. Be prepared to refactor components and update build configurations.","message":"Migrating from Vue 2 to Vue 3 involves significant breaking changes, including the move to the Composition API, changes to global APIs (now instance-based), and removal of some features like Filters and Event Bus.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Remember the `.value` convention in JavaScript/TypeScript code, but omit it in Vue templates. E.g., `myRef.value++` in script, `{{ myRef }}` in template.","message":"When using `ref` for reactive variables in the Composition API, you must access its value using `.value` in the `<script setup>` block. However, in templates, Vue automatically unwraps `ref`s, so you can use them directly without `.value`.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure your custom components accept a `modelValue` prop and emit an `update:modelValue` event. You can also customize the model name using `v-model:yourPropName`.","message":"The `v-model` directive on custom components in Vue 3 now expects a `modelValue` prop and emits an `update:modelValue` event by default. This is a change from Vue 2's `value` prop and `input` event.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always bind a unique `key` to items in `v-for` lists, preferably using a stable ID from your data. Avoid using array indices as keys if the list items can be reordered or filtered.","message":"The `key` attribute is crucial when using `v-for` to render lists of elements. Providing a unique and stable `key` helps Vue efficiently identify nodes, manage component state, and optimize rendering performance.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-18T00:00:00.000Z","next_check":"2026-07-17T00:00:00.000Z","problems":[{"fix":"Ensure the component is imported at the top of your script and then registered in the `components` option of your parent component, or globally if desired. Check for typos in the component name.","cause":"A component named 'X' was used in a template but was not correctly imported or registered (globally or locally).","error":"[Vue warn]: Failed to resolve component: X"},{"fix":"Ensure your `ref` is properly initialized, or use optional chaining (`myRef?.value`) if it might be `undefined`. If it's a template ref, access it after the component has mounted (e.g., in `onMounted`).","cause":"You are attempting to access `.value` on a `ref` variable that is currently `undefined` or `null`. This often happens when a `ref` is not yet initialized or when an element it's meant to reference hasn't been mounted.","error":"TypeError: Cannot read properties of undefined (reading 'value')"},{"fix":"Double-check the spelling of 'X'. If it's data, ensure it's returned from `data()` or defined as a `ref`/`reactive` in `setup()`. If it's a prop, ensure it's declared in the `props` option.","cause":"A property or method named 'X' was referenced in your component's template or script, but it doesn't exist in the component's data, props, computed properties, or methods.","error":"[Vue warn]: Property \"X\" was accessed during render but is not defined on instance."},{"fix":"Add a `<template>` block to your `.vue` file or define a `render` function within your component's options/setup. If using a build tool, ensure `.vue` files are correctly processed by a Vue loader.","cause":"Vue components require either a `<template>` block or a `render` function to define their output. This error occurs when neither is provided.","error":"Component is missing template or render function."}],"ecosystem":"npm"}