AI Code Generators Default to React Because Vue Is a DSL, Not Pure JavaScript

If you've been using AI programming tools like Codex, Cursor, or Claude Code intensively over the past few months, you've definitely noticed a phenomenon that makes domestic frontend developers extremely uncomfortable:

When you throw a design mockup or a natural language requirement at an AI and ask it to generate a frontend component, without any additional Prompt constraints, the code it spits out by default is always React plus Tailwind CSS🤔.

As a Vue developer, you have to repeatedly emphasize in your prompts: Please use Vue3 and script setup syntax!. But even then, the AI-generated Vue code often bizarrely includes className, or even attempts to write map mappings inside the template layer.

In the eyes of framework users, this might just be another debate about which framework is better. But what I want to talk about is that this overwhelming framework preference of large models actually exposes fundamental differences in the underlying technical architecture.

---

Is it just because of more training data?

When you raise this question, the vast majority of people will answer: because React has the world's largest ecosystem, with far more open-source projects and code corpora on GitHub than Vue. The large model has ingested more React code, so naturally it outputs more.

This statement is not wrong in itself, but it's an extremely lazy superficial explanation🤷‍♂️.

A large model is essentially a probability-based Token prediction machine. When generating code, it is influenced not only by the quantity of the corpus but also by the constraints of language structure (AST) purity. What truly makes AI struggle with Vue and frequently produce hallucinations is the vast chasm in their underlying design philosophies🤔.

---

JS Purity vs. the Cognitive Load of DSLs

In the eyes of us human programmers, Vue is extremely elegant. Its Single File Components (SFC) physically isolate <template>, <script>, and <style>, with clear logic, highly conforming to human intuition about web page structure.

But in the eyes of a large model, Vue is actually an extremely complex DSL (Domain-Specific Language).

What are large models best at predicting? Standard, Turing-complete general-purpose programming languages (like pure JavaScript or Python).

React's JSX superficially looks like tags, but at the AST (Abstract Syntax Tree) level, it is essentially pure JavaScript function calls. Core control flow (if/else, map, switch) completely follows native JS syntax rules. When the large model predicts the next Token, the context is highly coherent and cohesive👇.

// In the large model's usage, this is not HTML at all, this is just a standard JS pure function
export function UserList({ users }) {
  return (
    <ul>
      {users.length > 0 
        ? users.map(u => <li key={u.id}>{u.name}</li>)
        : <li>No data</li>}
    </ul>
  );
}

Vue is different. When generating Vue code, the large model must forcibly maintain two completely separate contexts in its mind: One is the template syntax extended from HTML (v-if, v-for, v-model), and the other is the script setup reactive logic below.

<!-- When generating long components, the large model easily loses data mapping in the template layer here -->
<template>
  <ul>
    <template v-if="userList.length > 0">
      <li v-for="u in userList" :key="u.id">{{ u.name }}</li>
    </template>
    <li v-else>No data</li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// When the code exceeds 300 lines, the AI easily forgets whether the variable bound above is users or userList
const userList = ref([]);
</script>

When the context length exceeds a few hundred lines, the large model is extremely prone to catastrophic hallucinations in the variable bindings between template and script. It might write an undeclared ref variable in the template, or write a bunch of logic in the script but forget to drive the view through template directives.

Humans are better at handling structural isolation, while machines are better at handling logical homology🖐️.

---

So what's the resistance to physical component splitting?

In daily collaboration with large models, the deepest pain point is actually code refactoring and splitting.

Large models have a common problem when writing code: they like to cram all logic into a single giant file. When this Frankenstein component swells to thousands of lines, you must command it to split.

In React, the cost of splitting components is extremely low. The large model only needs to write a few more Functions with capitalized first letters in the same file to directly complete fine-grained logic extraction. This on-demand inline splitting capability is highly compatible with AI's linear text generation logic.

But in the Vue ecosystem, creating a new component usually means having to create a new .vue file in the file system, and dealing with tedious import paths, parent-child component props passing, and emits event dispatching. Concurrent multi-file generation and underlying path mapping are precisely the weakest points where all current AI programming tools are most prone to failure.

This directly leads to AI code easily spiraling out of control when writing large Vue projects.

---

The Textualization of Frontend Components (Copy-Paste🤣)

Finally, we cannot avoid the brutal alignment of the entire frontend component library ecosystem.

In the era of AI-generated UI, solutions like Shadcn UI, which are purely based on Tailwind CSS and Radix UI, have become absolute rulers. Why? Because its components do not exist as a black-box npm dependency package at all, but as pure text source code that can be directly read, copied, and inline modified by the large model.

This code-as-UI model allows the AI to directly see through and customize every pixel of a component. Meanwhile, the dominant players in the Vue ecosystem (like Element Plus or Ant Design Vue) are still heavy global installation packages. The large model cannot see through the code inside the black box, and when encountering customization needs, it can only desperately guess at the documentation configuration parameters😖.

---

When making technology choices, we often get caught up in too many obsessions about good and bad.

If development is entirely led by pure human developers, Vue's extremely low mental burden and clear separation of concerns are still excellent tools for stabilizing medium-to-large business teams.

But if we are entering a new era dominated by AI code generation, we must face the brutal reality: React's purity of everything-is-a-function, everything-is-JavaScript indeed greatly reduces the cognitive load for machines.

Alright, that's it for today🙌