@vue/cli vs create-react-app: Legacy Scaffolding Tools Compared

Both @vue/cli and create-react-app served as the standard entry points for building Vue and React applications for many years. They abstract away complex Webpack configurations, allowing developers to focus on writing components rather than managing build scripts. However, the landscape has shifted. Both tools are now in maintenance mode, meaning they receive security fixes but no new features. Let's compare how they work and why modern teams are moving away from them.

⚠️ Current Maintenance Status

@vue/cli is in maintenance mode.

• The Vue team recommends create-vue for new Vue 3 projects.
• Vue 2 reached End of Life on December 31, 2023.
• Use only for legacy Vue 2 projects or specific Webpack needs.

# vue: Check version (Vue 2 focused)
vue --version
# Creates a Vue 2 or 3 project based on plugins
vue create my-project

create-react-app is in maintenance mode.

• The React documentation explicitly states they do not recommend it for new projects.
• It remains stable but lacks modern features like fast refresh or native Vite speed.
• Use only for legacy React projects or educational purposes.

# react: Check version
npx create-react-app --version
# Creates a React project
npx create-react-app my-app

🛠️ Configuration: Open vs Hidden

@vue/cli allows configuration without breaking the setup.

• You can add a vue.config.js file to customize Webpack.
• The CLI merges your config with its defaults safely.
• No need to expose all internal files to make changes.

// vue: vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '@/src'
      }
    }
  }
};

create-react-app hides configuration by default.

• You cannot edit Webpack config directly without "ejecting".
• Ejecting is permanent and exposes all internal files.
• Most teams use wrappers like craco to avoid ejecting.

// react: craco.config.js (requires extra package)
module.exports = {
  webpack: {
    alias: {
      '@': './src'
    }
  }
};

🚀 Development Server: Speed and Hot Reload

@vue/cli uses Webpack Dev Server.

• Supports Hot Module Replacement (HMR) for Vue components.
• Startup time depends on project size and Webpack complexity.
• Can feel slow on large codebases compared to newer tools.

# vue: Start dev server
npm run serve
# Access at http://localhost:8080

create-react-app uses Webpack Dev Server.

• Supports Fast Refresh for React components.
• Startup time is similar to Vue CLI on comparable hardware.
• Also struggles with large monorepos or heavy dependencies.

// react: Start dev server
npm start
// Access at http://localhost:3000

🧪 Testing Setup: Built-in vs Configurable

@vue/cli includes Jest or Mocha based on selection.

• You choose the test runner during project creation.
• Configuration is managed through the CLI plugin system.
• Easy to add Vue Test Utils for component testing.

// vue: tests/unit/example.spec.js
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    // Test logic here
  })
})

create-react-app includes Jest and React Testing Library.

• No choice during setup; Jest is the default and only option.
• Configuration is hidden unless you eject or use wrappers.
• Works out of the box for most React testing scenarios.

// react: src/App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  // Test logic here
});

📦 Build Output: Optimization and Control

@vue/cli provides detailed build reports.

• Runs webpack-bundle-analyzer via plugin if needed.
• Allows fine-tuning of code splitting and chunk names.
• Generates static assets ready for any static host.

# vue: Build for production
npm run build
# Outputs to dist/ folder

create-react-app provides standard build output.

• Generates optimized bundles with minimal config.
• Less control over chunk splitting without ejecting.
• Generates static assets ready for any static host.

// react: Build for production
npm run build
// Outputs to build/ folder

🤝 Similarities: Shared Ground Between Vue CLI and CRA

While they target different frameworks, both tools share a common philosophy and architecture. Here are key overlaps:

1. 📦 Both Rely on Webpack

• Use Webpack 4 or 5 under the hood for bundling.
• Share similar performance characteristics and limitations.
• Both struggle with startup speed compared to Vite.

# Both: Check dependencies
npm list webpack
# Will show webpack in both project trees

2. 🔌 Plugin Systems

• Support extensions via plugins or wrappers.
• Vue uses official CLI plugins; React relies on community wrappers.
• Both allow adding TypeScript, ESLint, and PWA support.

// Vue: Plugin usage in vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ pluginOptions: { /*...*/ } })

// React: Wrapper usage in craco.config.js
module.exports = { plugins: [ /*...*/ ] }

3. 🌐 Environment Variables

• Both support .env files for configuration.
• Variables must start with specific prefixes to be exposed.
• Secure handling of secrets during build time.

# Vue: .env file
VUE_APP_API_URL=https://api.example.com

# React: .env file
REACT_APP_API_URL=https://api.example.com

4. ✅ TypeScript Support

• Both offer TypeScript templates during setup.
• Configure tsconfig.json automatically.
• Support type checking during development and build.

// Both: tsconfig.json snippet
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext"
  }
}

5. 🛡️ Linting and Formatting

• Include ESLint configuration out of the box.
• Enforce code quality standards automatically.
• Can be configured to fix issues on save or commit.

// Both: package.json scripts
{
  "scripts": {
    "lint": "vue-cli-service lint"
  }
}

📊 Summary: Key Similarities

🆚 Summary: Key Differences

💡 The Big Picture

@vue/cli is like a customizable workshop 🔨—it lets you tweak the tools without breaking the setup. Ideal for teams stuck on Vue 2 or needing specific Webpack loaders without migrating to Vite.

create-react-app is like a sealed appliance 📦—it works perfectly until you need to open the hood. Ideal for beginners or teams maintaining older React codebases who want stability over flexibility.

Final Thought: Both tools solved major problems in their time by simplifying setup. However, for new projects, the industry has moved toward Vite-based solutions (create-vue, vite) or full-stack frameworks (Next.js, Nuxt). Use these legacy tools only when maintaining existing systems — not when building the future.