AI Code Generators Default to React Because Vue Is a DSL, Not Pure JavaScript
Teams betting on AI-assisted development face a real productivity asymmetry: React's everything-is-JavaScript design aligns with how language models predict tokens, while Vue's template DSL introduces a structural tax that produces more hallucinations, broken bindings, and refactoring friction. The choice is no longer just about developer ergonomics; it directly affects how reliably an AI agent can generate and maintain code.
When AI coding assistants generate frontend components without explicit framework instructions, they default to React and Tailwind CSS. The common explanation — more React code exists in training data — misses the structural reason. Large models predict tokens best inside a single, Turing-complete language. React's JSX is pure JavaScript at the AST level, so control flow, mapping, and composition stay in one coherent context. Vue splits logic across a template DSL and a script block, forcing the model to maintain two disconnected contexts that drift apart as files grow past a few hundred lines.
Component splitting amplifies the gap. React lets a model extract a new function inline in the same file. Vue requires a new `.vue` file, import paths, props, and emits — multi-file operations where AI tools still stumble. The ecosystem compounds this: Shadcn UI's copy-paste source-code model gives AI full visibility into every pixel, while Vue's dominant libraries ship as opaque npm packages the model cannot inspect, leaving it to guess at configuration parameters.
The framework debate shifts from developer experience to machine parsability: a framework that is easier for humans to reason about can be harder for a token-prediction model to generate correctly.
Vue's separation of concerns — often cited as its strength for human teams — becomes a liability when the code author is a model that excels at linear, single-context generation.
Component-library packaging strategy now directly affects AI usability. Black-box npm packages block the model from reading source code, making customization a guessing game that produces broken output.
Multi-file generation and path resolution remain a weak spot across AI coding tools, which penalizes frameworks and conventions that require frequent file creation for routine refactoring.
The core debate splits between those who see the React bias as a training-data problem and those who point to structural differences in Vue. One argument holds that Vue's template DSL is learnable by models given enough data, but the real blockers are implicit dependencies like provide/inject and auto-imports that obscure component origins. A counterargument dismisses code-level details entirely as already obsolete. A separate thread questions whether the distinction matters at all, attributing the preference to social dynamics — influential developers favor React's functional style and perceived sophistication.
Feels like it misses the point. The difficulty handling template syntax is still a training-data volume problem — the variables in templates do follow patterns. The real issue is that Vue has provide and inject, references whose origins are hard to trace, and the Vue ecosystem's love of auto-imports makes many global components' sources unclear. If everything used explicit imports, AI would actually read it better.
If you're still obsessing over code details, you've already fallen behind.
They're six of one, half a dozen of the other — no big difference for AI. The reasons are all external: the upper echelon just likes React. Vue is simple, and generally, hotshots don't like simple things. React also fits functional thinking better.