petite-vue - Progressively enhancing every application?

Modernize any server-rendered application without a rewrite. See how petite-vue adds powerful reactivity to existing pages with a tiny 5.5 KB footprint.

#1about 4 minutes

The case for progressive enhancement in legacy applications

Many existing websites are not single-page applications, making progressive enhancement a necessary strategy to add modern interactivity without a full rewrite.

#2about 5 minutes

Evaluating different tools for adding interactivity

A comparison of using full Vue.js, vanilla JavaScript, and jQuery reveals the trade-offs in bundle size, complexity, and developer experience for enhancing existing sites.

#3about 3 minutes

Introducing petite-vue for lightweight reactivity

Petite-vue is a minimal 5.5KB subset of Vue.js that provides reactivity without a virtual DOM, making it ideal for progressive enhancement.

#4about 4 minutes

Initializing and scoping petite-vue applications

Learn how to automatically initialize petite-vue using the `init` attribute or manually mount it to specific DOM elements for targeted reactivity.

#5about 3 minutes

Managing global state and computed properties

Use the root scope in `createApp` to provide global data and methods, and implement computed properties with simple getter functions.

#6about 4 minutes

Handling lifecycle events and side effects

Petite-vue offers `@vue:mounted` and `@vue:unmounted` for lifecycle hooks and uses the `v-effect` directive to trigger side effects when reactive data changes.

#7about 3 minutes

Creating reusable components and templates

Abstract logic into reusable components by defining them as functions and deduplicate markup using the native `<template>` tag with the `$template` property.

#8about 1 minute

Understanding the limitations of petite-vue

Petite-vue intentionally omits advanced features from full Vue like render functions, Teleport, and Suspense to maintain its small size.

#9about 2 minutes

Comparing petite-vue with the Alpine.js framework

A look at how petite-vue was inspired by Alpine.js, which itself was inspired by Vue, highlighting their similarities and key differences in size and features.

#10about 1 minute

A decision tree for choosing the right tool

A simple guide helps you decide when to use Nuxt.js for greenfield projects, vanilla JS for tiny tasks, or petite-vue for enhancing existing applications.

#11about 6 minutes

Live coding a simple interactive component

A practical demonstration shows how to build an interactive element using `v-scope`, event handling, `v-if` for conditional rendering, and `v-cloak` to prevent flashes of unstyled content.

From learning to earning

Jobs that call for the skills explored in this talk.