> Markdown version of [/videos/542-petite-vue-progressively-enhancing-every-application](https://www.wearedevelopers.com/videos/542-petite-vue-progressively-enhancing-every-application). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# petite-vue - Progressively enhancing every application?

Need modern interactivity in a legacy monolith but can't justify an expensive SPA rewrite? Learn how to sprinkle 6kb reactive islands into server-rendered HTML using petite-vue.

- **Speakers:** Alexander Lichter
- **Event:** WeAreDevelopers LIVE
- **Published:** April 18, 2023
- **Duration:** 44:40
- **URL:** https://www.wearedevelopers.com/videos/542-petite-vue-progressively-enhancing-every-application

## Summary

Despite the widespread popularity of Single Page Applications (SPAs), many legacy systems—such as server-rendered PHP or Java monoliths—cannot justify a full architectural rewrite due to budget constraints or deep domain complexities. Yet, these applications still require modern interactivity. While dropping in full Vue.js or relying on vanilla JavaScript and jQuery are common workarounds, these approaches often introduce unnecessary bundle bloat, complex build steps, or non-declarative, hard-to-maintain spaghetti code.

Enter petite-vue, an ultra-lightweight (~6kb) subset of Vue.js specifically optimized to solve this through "progressive enhancement." Created by Evan You, petite-vue strips away the virtual DOM and build requirements, opting instead to directly walk the existing HTML DOM to attach reactivity. By utilizing directives like `v-scope` and `v-effect`, developers can easily sprinkle reactive, island-like functionality exactly where needed without overhauling the existing server-rendered HTML.

Petite-vue offers a familiar developer experience, retaining standard template interpolation, two-way data binding, and basic lifecycle hooks like `@vue:mounted`. While it drops explicit computed properties, standard getter functions seamlessly replace them. For code reuse, developers can define components dynamically via native HTML `<template>` tags. Compared to similar alternatives like Alpine.js, petite-vue provides a smaller footprint and keeps the codebase fully continuous with the Vue ecosystem, making eventual migrations to a full Vue application highly straightforward.

**Keywords:** petite-vue, progressive enhancement, vue.js ecosystem, legacy application migration, server-rendered monoliths, no-build frontend frameworks, alpine.js comparison, v-scope directive, virtual dom removal, native html templates, javascript reactivity, single page application alternatives, frontend build steps, vanilla javascript limitations

## Chapters

1. **The reality of single-page applications versus legacy monoliths** (00:53) — Constraints like budget and lost domain knowledge challenge the migration of legacy server-rendered applications to modern frontends.
1. **Implementing progressive enhancement on existing backends** (04:25) — Examining lightweight alternatives allows developers to add interactivity to server-rendered markup without entirely replacing the existing infrastructure.
1. **Defining petite-vue and its architectural differences** (09:43) — The creation of an ultra-lightweight frontend layer relies on walking the existing DOM instead of employing a heavy virtual tree.
1. **Migrating components using the v-scope state directive** (11:05) — Declaring component state directly within HTML attributes allows rapid logic initialization without imposing complex external build steps.
1. **Manual logic initialization and managing global root scopes** (13:59) — Selectively mounting isolated capabilities to specific element identifiers keeps the vast majority of previously generated backend content untouched.
1. **Replicating computed properties via standard getter functions** (17:23) — Calculating dynamic derived data is achieved naturally within the reactivity system by invoking standard javascript getter methods.
1. **Hooking into element lifecycles without virtual DOM events** (18:59) — Developers can execute custom actions by listening for mounting and unmounting events directly on standardized markup elements.
1. **Triggering asynchronous side effects with the v-effect directive** (20:34) — Wrapping data fetching routines inside reactive boundaries forces the interface to automatically re-evaluate behavior whenever internal variable dependencies shift.
1. **Constructing reusable logic blocks and native HTML templates** (22:38) — Leveraging standalone factory functions alongside browser-native wrapper tags removes markup duplication across repetitive structural interface instances.
1. **Evaluating framework limitations and competing lightweight alternatives** (26:07) — Understanding architectural boundaries and assessing direct competitors clarifies when localized frameworks outperform monolithic single-page toolchains.
1. **Live coding a tiny interactive component inside HTML** (30:15) — Structuring an explicit toggle state overlay sequentially within markup establishes the precise interaction flow between rendering and user input.
1. **Question and answer session on syntax and compatibility** (36:10) — Exploring specific syntax compatibility and older browser limitations guarantees long-term stability when attempting deployments targeting legacy environments.

## Related Moments

- [Introduction to the speaker and frontend projects](https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application) (from "Lessons learned from building a thriving Vue.js SaaS application")
- [Comparing Vue to React and Angular](https://www.wearedevelopers.com/videos/127-vuejs-and-typescript-working-together-like-peanut-butter-and-jelly) (from "Vuejs and TypeScript- Working Together like Peanut Butter and Jelly")
- [Democratizing cross-platform development with alternative JavaScript frameworks](https://www.wearedevelopers.com/videos/1445-lynx-native-for-more) (from "Lynx: Native for More")
- [Integrating web components across popular javascript frameworks](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [Transitioning progressive framework features to the newer version](https://www.wearedevelopers.com/videos/320-building-better-with-nuxt-3) (from "Building Better with Nuxt 3")
- [Adopting progressive enhancement workflows to prevent frontend bloat](https://www.wearedevelopers.com/videos/1761-wearedevelopers-live-frontend-inspirations-web-standards-and-more) (from "WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more")

## Related Articles

- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [The Best 7 Frontend Frameworks for Developers in 2025](https://www.wearedevelopers.com/magazine/400-the-best-7-frontend-frameworks-for-developers-in-2025)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**