# vuejs/petite-vue

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vuejs-petite-vue).**

9,683 stars · 397 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/vuejs/petite-vue
- awesome-repositories: https://awesome-repositories.com/repository/vuejs-petite-vue.md

## Description

Petite-vue is a lightweight, client-side reactive UI library and templating engine designed for progressive enhancement. It serves as a minimal state management tool that binds reactive data to DOM elements, allowing user interfaces to update automatically when state changes without requiring a full build step.

The framework specifically focuses on adding interactivity to server-rendered HTML. It allows for the creation of isolated reactive regions and embedded widgets on a single page, using custom delimiters to prevent syntax conflicts with server-side template engines.

The system covers reactive state management, the definition of reusable components, and the creation of custom directives to manipulate DOM elements. It handles DOM lifecycle events and utilizes proxy-based reactivity to synchronize data changes with the browser.

## Tags

### Web Development

- [Client-Side Template Engines](https://awesome-repositories.com/f/web-development/client-side-template-engines.md) — Implements a client-side rendering engine that handles dynamic content and events directly within HTML attributes.
- [Attribute Binding](https://awesome-repositories.com/f/web-development/attribute-binding.md) — Provides a mechanism to dynamically configure HTML element attributes using reactive expressions.
- [Progressive Hydration](https://awesome-repositories.com/f/web-development/html-hydration/progressive-hydration.md) — Hydrates server-rendered HTML by attaching reactive logic to existing nodes without replacing the page structure.
- [Lightweight UI Frameworks](https://awesome-repositories.com/f/web-development/lightweight-ui-frameworks.md) — Provides a minimal footprint for implementing simple reactive state and event handling for fast page loads.
- [Progressive Enhancement Frameworks](https://awesome-repositories.com/f/web-development/progressive-enhancement-frameworks.md) — Serves as a lightweight framework for adding reactive interactivity to server-rendered HTML without a build step.
- [Progressive Enhancement Workflows](https://awesome-repositories.com/f/web-development/progressive-enhancement-workflows.md) — Enables adding dynamic interactivity to server-rendered HTML without the need for a full client-side framework.
- [Proxy-Based Reactivity](https://awesome-repositories.com/f/web-development/proxy-based-reactivity.md) — Utilizes JavaScript Proxies to track data dependencies and trigger automatic UI updates.
- [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Implements a lightweight reactive state system using JavaScript Proxies to automatically synchronize data changes with the DOM. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))
- [Custom Template Delimiters](https://awesome-repositories.com/f/web-development/custom-template-delimiters.md) — Allows redefining interpolation characters to prevent syntax conflicts with server-side template engines.
- [Reactive Directives](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/directives/reactive-directives.md) — Allows the creation of custom attributes that reactively manipulate DOM elements based on expressions. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))
- [Reactive Region Isolation](https://awesome-repositories.com/f/web-development/reactive-frontend-frameworks/reactive-region-isolation.md) — Targets specific DOM elements or selectors to run multiple independent reactive instances on a single page. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))
- [Server-Side Template Integration](https://awesome-repositories.com/f/web-development/server-side-template-integration.md) — Adds client-side reactivity to pages generated by server-side engines while avoiding syntax conflicts.
- [Isolated Reactive Widgets](https://awesome-repositories.com/f/web-development/third-party-api-integrations/widget-embedding/isolated-reactive-widgets.md) — Facilitates the creation of small, isolated reactive components that operate independently within larger webpages.

### Software Engineering & Architecture

- [Direct-to-DOM Template Rendering](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-schema-mapping/component-mappings/direct-to-dom-template-rendering.md) — Walks the existing HTML tree to bind directives directly to DOM nodes without using a virtual DOM.
- [Reactive Boundary Scoping](https://awesome-repositories.com/f/software-engineering-architecture/execution-control/namespace-isolation/module-isolation/architecture-isolation/global-scope-isolation/reactive-boundary-scoping.md) — Creates independent reactive boundaries by scoping state to specific DOM elements or root containers.

### User Interface & Experience

- [HTML Element Bindings](https://awesome-repositories.com/f/user-interface-experience/html-element-bindings.md) — Binds reactive data and event listeners directly to existing server-rendered HTML elements. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))
- [Reactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-frameworks.md) — Binds data to DOM elements to ensure the user interface updates automatically when state changes.
- [Logic & Template Definitions](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components/logic-template-definitions.md) — Provides the ability to define repeatable logic and templates that can be instantiated as components across a page. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))

### Development Tools & Productivity

- [Reactive Inline Expressions](https://awesome-repositories.com/f/development-tools-productivity/task-execution/reactive-task-executions/reactive-inline-expressions.md) — Executes specific JavaScript code automatically whenever dependent reactive data changes. ([source](https://cdn.jsdelivr.net/gh/vuejs/petite-vue@main/README.md))