Guide · Open source
How to use mini-vue: clone, build and learn Vue 3 internals
Updated · written with AI from the project's own documentation and checked against our catalogue data
mini-vue is an open-source, stripped-down version of Vue 3 written in TypeScript. It keeps the core logic of reactivity, runtime and a basic compiler, and removes most edge-case handling so you can follow how Vue 3 works. This guide shows how to get the code, build it, run the examples and use the project as a study aid before reading the full Vue source.
mini-vuecuixiaorui/mini-vue · ★ 10.5k · MIT Install options & downloads Quick start
- 1Check prerequisites. Install Node.js and pnpm on your machine.
- 2Clone the repository. Run git clone https://github.com/cuixiaorui/mini-vue to get the source.
- 3Build the project. Run pnpm build inside the project folder.
- 4Open the examples. Serve packages/vue/example/index.html files with a local server such as Live Server.
- 5Trace a function. Pick a function name from the flow charts and search for it in the source.
- 6Compare with Vue source. Read the matching parts of the real Vue 3 source to see what edge-case handling was removed.
What mini-vue is and who it is for
mini-vue is a teaching project. Its README says the goal is to pull the core logic out of the Vue 3 source so readers can learn it more easily. Naming in the code is kept consistent with the Vue source, so you can search for function names in the real codebase.
It suits developers who want to understand Vue 3 internals, and learners who prefer writing and reading small code over large codebases. The README is mainly in Chinese, and the video course it links is in Chinese, so it fits readers comfortable with that language. It is not meant for building apps with Vue, and the README presents it as a learning project rather than a production framework.
Install prerequisites: Node.js and pnpm
The install method is clone-and-build. The source lists Node.js and pnpm as prerequisites. The README does not state specific version numbers, so check the project for any requirements before you start.
- Node.js
- pnpm
Clone the repository and build the project
First, clone the repository from GitHub. Then run the build script from the project folder. The project uses pnpm for its monorepo setup.
git clone https://github.com/cuixiaorui/mini-vue
pnpm buildRun the examples in a browser
The README says to open the index.html files under packages/vue/example/* through a server, not by double-clicking the file. It recommends the Live Server extension for VS Code.
- Open the project folder and locate packages/vue/example/
- Serve index.html from a local server, for example with Live Server
- Use the examples to see the reactivity and component features at work
Learn the core logic: reactivity, runtime and compiler
The README's task list covers three areas. In reactivity it lists reactive, ref, readonly, computed, track and trigger, plus effect.scheduler and effect.stop. In runtime-core it lists components, props, setup, emit, provide/inject, slots, getCurrentInstance, nextTick and watchEffect. The compiler-core part covers parsing interpolation, elements and text.
The README also includes flow charts and function call graphs for initialization and update. Use them with the code: look up a function name from the diagram and find it in the source.
- reactivity: reactive, ref, computed, track, trigger
- runtime-core: component setup, props, emit, slots, provide/inject
- compiler-core: parse interpolation, element and text
- runtime-dom and runtime-test: custom renderer and tests
Use the optional video course to build it yourself
The README describes a paid video course, in Chinese, that builds mini-vue step by step. It links a course introduction, a free trial lesson and a purchase page, and says a WeChat contact can answer whether the course suits you. Treat the course as optional: the README does not require it to build or read the code.
What people use it for
- Reading how reactive and effect track and trigger dependencies before opening vue-next
- Tracing the component initialization and update flow with the README's diagrams
- Practising TypeScript-based Vue internals by reading and modifying small modules
- Studying how a custom renderer works through the runtime-dom and runtime-test packages
Frequently asked questions
How do I install mini-vue?
The project uses a clone-and-build method. Run git clone https://github.com/cuixiaorui/mini-vue, then run pnpm build inside the folder. You need Node.js and pnpm installed first.
Is mini-vue free to use?
mini-vue is released under the MIT licence, which is an open-source licence. The video course that the README links is a paid product, so it is separate from the code.
What do I need to run mini-vue?
The source lists Node.js and pnpm as prerequisites. To view the examples, the README says to serve the index.html files through a server, and it recommends Live Server.
Can I use mini-vue to build a production app?
No. The README presents mini-vue as a learning project that keeps only core logic. Use the official Vue 3 framework for production apps.
What are the alternatives to mini-vue?
The source lists vue-next, petite-vue and vue3-mini as comparable projects. vue-next is the full Vue 3 source, which includes the edge-case handling that mini-vue removes.
Is the documentation in English?
The README is mainly in Chinese, but it links an English version (README_EN). The course materials and videos are in Chinese.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
mini-vue is a good fit for developers who want to understand Vue 3 internals before reading the full source, especially if they are comfortable with Chinese-language materials. If you only want to build apps with Vue, or need English course materials and production-grade code, pick the official Vue 3 project or one of the other comparable projects instead.
Install options & downloads