tessl/npm-vue
The progressive JavaScript framework for building modern web UI.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
index.mddocs/
Vue.js
Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications. It provides a component-based architecture with reactive data binding, declarative rendering, and comprehensive build system supporting multiple output formats. Vue 3 introduces the Composition API alongside the Options API, improved TypeScript support, better tree-shaking, and enhanced performance through optimized virtual DOM diffing and proxy-based reactivity.
Package Information
- Package Name: vue
- Package Type: npm
- Language: TypeScript
- Installation:
npm install vue
Core Imports
import { createApp, ref, reactive, computed } from "vue";For CommonJS:
const { createApp, ref, reactive, computed } = require("vue");Basic Usage
import { createApp, ref, reactive } from "vue";
// Create application instance
const app = createApp({
setup() {
// Reactive state
const count = ref(0);
const user = reactive({
name: "John",
email: "john@example.com"
});
// Computed property
const doubledCount = computed(() => count.value * 2);
// Method
const increment = () => {
count.value++;
};
return {
count,
user,
doubledCount,
increment
};
},
template: `
<div>
<h1>{{ user.name }}</h1>
<p>Count: {{ count }}</p>
<p>Doubled: {{ doubledCount }}</p>
<button @click="increment">Increment</button>
</div>
`
});
// Mount to DOM
app.mount("#app");Architecture
Vue.js is built around several key systems:
- Reactivity System: Proxy-based reactive state management with fine-grained dependency tracking
- Component System: Declarative component model with props, emits, slots, and lifecycle hooks
- Template Compiler: Transforms templates into optimized render functions at build time
- Virtual DOM: Efficient diffing algorithm for minimal DOM updates
- Composition API: Function-based API for better code organization and reusability
- Options API: Object-based API providing familiar Vue 2 patterns
- Single File Components:
.vuefiles containing template, script, and style in one file
Capabilities
Application Creation
Core functions for creating and configuring Vue applications.
function createApp(rootComponent?: Component): App;
function createSSRApp(rootComponent?: Component): App;Reactivity System
Comprehensive reactive state management with refs, reactive objects, computed properties, and effect tracking. Enables fine-grained reactivity with automatic dependency collection.
function ref<T>(value: T): Ref<T>;
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;
function computed<T>(getter: () => T): ComputedRef<T>;
function watch<T>(source: T, callback: WatchCallback<T>): WatchStopHandle;Component System
Complete component lifecycle management, composition API, dependency injection, and watchers. Provides both Options API and Composition API patterns.
function defineComponent<Props, RawBindings = object>(
setup: (props: Props, ctx: SetupContext) => RawBindings | RenderFunction
): ComponentConstructor;
function onMounted(callback: () => void): void;
function onUnmounted(callback: () => void): void;
function provide<T>(key: InjectionKey<T>, value: T): void;
function inject<T>(key: InjectionKey<T>): T | undefined;Rendering
Virtual DOM creation, manipulation, and rendering with built-in components and custom renderers.
function h(
type: string | Component,
props?: object | null,
children?: VNodeChildren
): VNode;
function render(vnode: VNode, container: Element): void;Server-Side Rendering
Complete SSR support with streaming, hydration, and context management for building universal applications.
function renderToString(app: App): Promise<string>;
function renderToNodeStream(app: App): NodeJS.ReadableStream;
function hydrate(vnode: VNode, container: Element): void;Single File Component Compilation
Tools for parsing, compiling, and transforming Vue Single File Components (.vue files) including template, script, and style processing.
function parse(source: string, options?: SFCParseOptions): SFCDescriptor;
function compileTemplate(options: SFCTemplateCompileOptions): SFCTemplateCompileResults;
function compileScript(sfc: SFCDescriptor, options: SFCScriptCompileOptions): SFCScriptBlock;Utilities
Helper functions, type guards, string manipulation, and development tools for Vue applications.
function nextTick(callback?: () => void): Promise<void>;
function getCurrentInstance(): ComponentInternalInstance | null;
function isRef(value: any): value is Ref;
function toRaw<T>(observed: T): T;
function useCssModule(name?: string): Record<string, string>;
function useCssVars(vars: Record<string, string | Ref<string>>): void;Custom Elements
Vue-based custom elements for framework-agnostic component distribution and web standards integration.
function defineCustomElement<T extends Component = Component>(
component: T,
options?: CustomElementOptions
): CustomElementConstructor;
function useShadowRoot(): ShadowRoot | null;
function useHost(): Element | null;JSX Support
Comprehensive JSX/TSX support with full TypeScript integration and Vue reactivity.
function jsx(type: any, props: any, key?: any): VNode;
function jsxs(type: any, props: any, key?: any): VNode;
const Fragment: unique symbol;Development Tools
Development utilities, debugging tools, version information, and DevTools integration.
const version: string;
function warn(msg: string, instance?: ComponentInternalInstance | null): void;Hydration Strategies
Modern hydration strategies for optimizing SSR applications with selective hydration.
function hydrateOnIdle(component: Component): Component;
function hydrateOnVisible(component: Component): Component;
function hydrateOnMediaQuery(component: Component, query: string): Component;
function hydrateOnInteraction(component: Component, events: string[]): Component;