vue

library0.0.1jsnpmunverified

Vue.js is an open-source, progressive JavaScript framework for building user interfaces and single-page applications. The current stable version, 3.5.32, reflects ongoing development with patch releases occurring as needed, and minor versions, which introduce new features, typically released every 3-6 months following beta phases. Vue 3 significantly improved performance, tree-shaking, and TypeScript integration, while introducing the Composition API for enhanced reusability and organization of component logic. It maintains a progressive adoption strategy, allowing developers to integrate it incrementally, and features a highly efficient virtual DOM, component-based architecture, and reactive data binding, making it a flexible and powerful choice for modern web development.

web-framework

npm install vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE

vue

web-frameworkjavascriptv0.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createApp

✓ import { createApp } from 'vue'

✗ const Vue = require('vue'); Vue.createApp(...)

The global `Vue` constructor was removed in Vue 3; `createApp` is now the entry point. Vue 3 is primarily ESM-first, making direct `require` less common for core functionality.

ref

✓ import { ref } from 'vue'

✗ import Vue from 'vue'; Vue.ref(...)

Used for declaring reactive primitive values and reactive objects. Access its inner value with `.value`. Not a property on the global `Vue` object.

reactive

✓ import { reactive } from 'vue'

✗ import { reactive } from '@vue/composition-api'

Used for declaring reactive object values. The `@vue/composition-api` package was for Vue 2 compatibility; in Vue 3, `reactive` is directly available from `vue`. Using `reactive` with primitives will result in a warning.

onMounted

✓ import { onMounted } from 'vue'

A lifecycle hook provided by the Composition API, typically used within `<script setup>` or the `setup()` function of a component.

This quickstart demonstrates a minimal Vue 3 application using the Composition API, `ref` for reactivity, `onMounted` lifecycle hook, and a simple template, then mounts it to an HTML element.

import { createApp, ref, onMounted } from 'vue'; const App = { setup() { const count = ref(0); const message = ref('Hello Vue 3!'); const increment = () => { count.value++; }; onMounted(() => { console.log('App is mounted! Count:', count.value); }); return { count, message, increment }; }, template: ` <div> <h1>{{ message }}</h1> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <p>This is a basic Vue 3 application using the Composition API.</p> </div> ` }; createApp(App).mount('#app');

Debug

Known issues

breakingMigrating from Vue 2 to Vue 3 involves significant breaking changes. Key changes include the removal of the global `Vue` constructor, `$on`/`$off`/`$once` instance methods, filters, `inline-template`, `$children`, and `$listeners` (merged into `$attrs`). The `v-model` directive's usage on custom components and the precedence of `v-if` vs `v-for` have also changed. It's highly recommended to consult the official migration guide and consider using the `@vue/compat` migration build for incremental upgrades.

fix

Refer to the official Vue 3 Migration Guide. For large projects, consider using `@vue/compat` (migration build) for a gradual transition, then address warnings before removing it.

affects: >=3.0.0

gotchaVue 3's reactivity system has important distinctions between `ref` and `reactive`. `ref` should be used for primitive values (string, number, boolean) and requires `.value` to access/mutate, while `reactive` is for objects (plain objects, arrays, Maps, Sets). Using `reactive` with primitives will result in a non-reactive value and a warning. Destructuring a `reactive` object directly will also cause loss of reactivity.

fix

Use `ref` for primitives and `reactive` for objects. Always access/mutate `ref` values with `.value`. For destructuring `reactive` objects while preserving reactivity, use `toRefs` or `toRef` utilities.

affects: >=3.0.0

breakingThe global `Vue` API was restructured in Vue 3. Most global APIs (e.g., `Vue.component`, `Vue.directive`) are now methods on an application instance created by `createApp()`. This promotes tree-shaking and avoids global pollution.

fix

Instead of `Vue.component('my-component', ...)`, use `const app = createApp(App); app.component('my-component', ...);`.

affects: >=3.0.0

breakingThe default `prop` and `event` names for `v-model` when used on custom components changed from `value` and `input` to `modelValue` and `update:modelValue`. The `.sync` modifier has also been removed, with its functionality now integrated into `v-model` itself by using arguments.

fix

Update custom components to expect `modelValue` as a prop and emit `update:modelValue` for two-way binding. For multiple `v-model`s, use `v-model:argumentName` syntax.

affects: >=3.0.0

gotchaChild component events must now be explicitly declared using the `emits` option in the Options API or the `defineEmits` macro in `<script setup>`. Undeclared events will still work but will trigger a warning in development mode.

fix

Add an `emits` array/object to your component options or use `const emit = defineEmits(['my-event'])` in `<script setup>`.

affects: >=3.0.0

Errors

Common errors & fixes

[Vue warn]: value cannot be made reactive. Try it yourself.

Attempting to wrap a primitive value (e.g., number, string, boolean) with `reactive()` instead of `ref()`.

fix

Use `ref(0)` for primitive values. For objects, use `reactive({ count: 0 })`.

Unexpected mutation of "propName" prop.

A child component is directly attempting to modify a prop received from its parent, which is an anti-pattern in Vue and breaks unidirectional data flow.

fix

Emit an `update:propName` event from the child component for the parent to update the prop, or create a local copy of the prop data if it needs to be modified within the child.

Component is missing template or render function.

The component definition lacks a template (e.g., `<template>` block in a SFC) or a render function to specify what should be rendered. This can happen with client-side only builds that don't include a template compiler.

fix

Ensure your component has a `<template>` block in a SFC, or a `template` string/render function in its definition. If using a buildless setup, use the full Vue build that includes the template compiler.

[Vue warn]: Failed to resolve component: ComponentName. If this is a native custom element, make sure to add it to `compilerOptions.isCustomElement` in your Vue config.

Vue could not find a registered component with the given `ComponentName`. This often means a typo, the component was not imported, or it was not registered globally/locally.

fix

Check the component name for typos. Ensure the component is imported and then registered either globally (`app.component('ComponentName', MyComponent)`) or locally within the parent component's `components` option.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

typescriptoptionalPeer dependency for projects using TypeScript, which Vue 3 has strong support for.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuejs/core ↗

packagehttps://www.npmjs.com/package/vue ↗

homepagehttps://vuejs.org ↗