cuixiaorui/mini-vue

★ 10,579TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((mini-vue))
    What it does
      Vue 3 core rebuild
      Teaching project
      Simplified source
    Modules
      Reactivity system
      Runtime core
      Template compiler
    How to use
      Read source code
      Run HTML examples
      Follow TDD tests
    Tech stack
      TypeScript
      pnpm
      Vue 3 patterns

mindmap root((mini-vue)) What it does Vue 3 core rebuild Teaching project Simplified source Modules Reactivity system Runtime core Template compiler How to use Read source code Run HTML examples Follow TDD tests Tech stack TypeScript pnpm Vue 3 patterns

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Study how Vue 3's reactivity system works under the hood by reading and running mini-vue's simplified implementation.

USE CASE 2

Learn Vue 3's virtual DOM diff algorithm by tracing through the stripped-down runtime core step by step.

USE CASE 3

Use mini-vue as a readable reference when navigating the real Vue 3 source code, since both share the same naming conventions.

USE CASE 4

Follow the companion video course to build the entire Vue 3 core from scratch using a test-driven approach.

Tech stack

TypeScriptJavaScriptpnpmVue 3

Getting it running

Difficulty · easy Time to first run · 30min

Run pnpm build to compile the project, open example HTML files with a local web server to see the demos in action.

No explicit license information is stated in the repository description.

In plain English

Mini-vue is a teaching project that rebuilds the core of Vue 3, a popular JavaScript framework used to build web interfaces, in a stripped-down form. Vue 3's actual source code is large and contains a lot of code for handling edge cases and browser compatibility. Mini-vue removes all of that and keeps only the essential logic, making it easier for developers who want to understand how Vue 3 works under the hood. The project is written in TypeScript and mirrors the naming conventions of the real Vue 3 source code, so that once you understand how something works in mini-vue you can find the corresponding code in the full Vue 3 repository. It covers three major areas of Vue 3: the reactivity system (which tracks data changes and updates the UI automatically), the runtime core (which handles how components are created, updated, and removed from the page), and the compiler (which translates HTML-like template syntax into JavaScript functions). The repository is accompanied by a paid video course in Chinese, taught by the author, that walks through building mini-vue from scratch one step at a time. The course covers over 50 individual implementation steps, from basic reactive state tracking all the way through the diff algorithm that Vue uses to update the page efficiently. The author emphasizes test-driven development throughout the course, writing tests before writing the implementation code. To run the examples, you open the HTML files in the examples folder using a local web server. To build the project, you run pnpm build. The repository README is written primarily in Chinese and links to video course previews and purchase information on a Chinese e-learning platform.

Copy-paste prompts

Prompt 1

Using mini-vue's reactivity implementation as a reference, explain how Vue 3's ref() and reactive() track dependencies and trigger UI updates when data changes.

Prompt 2

Walk me through how mini-vue implements the virtual DOM diff algorithm, focusing on the patch function and how it handles lists with keys.

Prompt 3

I want to understand how Vue 3's template compiler works. Explain how mini-vue transforms an HTML-like template string into a JavaScript render function.

Prompt 4

Help me write a unit test for mini-vue's computed() that verifies lazy evaluation and caching behavior, following the project's test-driven development style.

Open on GitHub → Explain another repo

← cuixiaorui on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.