or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-system.mdcustom-elements.mddevelopment-tools.mdindex.mdjsx-support.mdreactivity.mdrendering.mdsfc-compilation.mdssr.mdutilities.md
tile.json

tessl/npm-vue

The progressive JavaScript framework for building modern web UI.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue@3.5.0

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: .vue files 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;

Reactivity System

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;

Component System

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;

Rendering

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;

Server-Side Rendering

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;

SFC Compilation

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;

Utilities

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;

Custom Elements

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;

JSX Support

Development Tools

Development utilities, debugging tools, version information, and DevTools integration.

const version: string;
function warn(msg: string, instance?: ComponentInternalInstance | null): void;

Development Tools

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;