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.