tezvyn:

Explain Vue as a progressive framework and build-step differences

AI-drafted, machine-checkedSource: vuejs.orgbeginner

Tests incremental adoptability. Strong answers define progressive as layer-by-layer adoption, describe script-tag HTML enhancement, and contrast it with compiled SFC SPA toolchains. Red flag: calling Vue lightweight rather than incrementally adoptable.

WHAT THIS TESTS: This question checks whether you understand architectural flexibility and the difference between a runtime-enhanced page and a compiled application. Interviewers want to see that you know Vue can start as a drop-in library and graduate to a full framework, rather than forcing an all-or-nothing decision at project kickoff. They are also listening for awareness of the build-step boundary and what features live on each side.

A GOOD ANSWER COVERS: Four specific points in order. First, define progressive as incrementally adoptable: you can add Vue to a single button, a whole page, or an entire SPA without rewriting everything. Second, explain the no-build workflow: load Vue via a CDN script tag, call createApp with an inline template or template strings in JavaScript, and enhance existing static HTML with declarative rendering and reactivity. Third, contrast that with a full-scale project using a build step such as Vite or the legacy Vue CLI, where you write Single-File Components, use npm package imports, get tree-shaking, compile templates ahead of time for better performance, and manage dependencies with a package manager. Fourth, mention that the same core framework scales further up to server-side rendering, static site generation, or even non-web targets like WebGL and the terminal, so the progression is genuine and not just marketing.

COMMON WRONG ANSWERS: Calling Vue progressive only because it has a small bundle size. Saying Vue always needs Webpack, Vite, or a compiler to run. Describing the no-build version as merely a prototype toy rather than a production-valid approach. Confusing the global build with the ES modules build and not knowing which one works in a plain script tag. Claiming that without a build step you lose reactivity, which is false.

LIKELY FOLLOW-UPS: When would you choose the no-build approach over a Vite project? How does Vue's reactivity system work in a script-tag setup? Can you use Single-File Components without a build step? How do you migrate from a CDN-enhanced page to a compiled SPA incrementally? What are the performance trade-offs between runtime template compilation and pre-compiled SFCs?

ONE CONCRETE EXAMPLE: Imagine a legacy server-rendered Django page with a complex form. You drop in a script tag loading Vue 3 from a CDN, mount a small app on just the form div, and use v-model and reactivity to build a dynamic multi-step wizard. The rest of the page remains untouched Django HTML. Six months later, you move that component into a Vite project, convert its template string to a Single-File Component, and wire it into a Vue Router SPA while keeping the same reactive logic and component structure.

Read the original → vuejs.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.