Buttercups logo
·9 min read

Vue vs React Examples: Side-by-Side Code Comparison

Choosing the right JavaScript framework or library is no small feat—especially when it comes to two titans of the frontend world: Vue.js and React. Developers often find themselves debating between the two, but what if you could see a real side-by-side comparison, with actual code to illustrate the differences? In this guide, we’ll walk through Vue vs React examples for common UI tasks, examining not only their syntax but also their philosophies and use cases. Whether you’re at the beginning of your journey or seeking to expand your toolkit, this deep dive will help clarify which technology best fits your next project.

Understanding the Landscape: Vue and React

Before jumping into code, let's quickly recap what sets Vue.js and React apart. Both are focused on building user interfaces, but their approaches differ.

  • React hinges on the idea of components as functions or classes that return JSX (a syntax extension for JavaScript that looks like HTML).
  • Vue also uses components but encapsulates template, logic, and styles within a single file, called a Single File Component (SFC).

While both are fast, flexible, and popular, developers tend to choose between Vue and React based on the ecosystem, learning curve, and style of code they prefer.

Getting Started: Hello World

Let’s ease in with a “Hello World” example to compare Vue vs React at their simplest.

React Hello World

import React from "react";
import ReactDOM from "react-dom";
 
function App() {
  return <h1>Hello World from React!</h1>;
}
 
ReactDOM.render(<App />, document.getElementById("root"));

Vue Hello World

<template>
  <h1>Hello World from Vue!</h1>
</template>
 
<script>
export default {
  name: "App",
};
</script>

Takeaway: Immediately, you notice how Vue separates markup from script, while React’s JSX blends them. For beginners, this difference in structure is often a deciding factor in the Vue vs React debate.

Handling State: A Minimal Counter Example

State management is fundamental in modern frontend frameworks. Here’s how Vue vs React compare when building a counter.

React Counter Example

import React, { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Vue Counter Example

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Analysis: In Vue, data binding uses {{ }} while event handling leverages @click. React achieves similar results with the useState hook and onClick. The Vue syntax may feel more declarative, especially for those familiar with HTML.

Props and Component Communication

Passing data between components is a daily requirement. Here’s how component props work in Vue vs React.

Parent with Props: React Example

function Child({ message }) {
  return <p>{message}</p>;
}
 
function Parent() {
  return <Child message="Hello from Parent (React)!" />;
}

Parent with Props: Vue Example

<!-- Child.vue -->
<template>
  <p>{{ message }}</p>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>
 
<!-- Parent.vue -->
<template>
  <Child :message="'Hello from Parent (Vue)!'" />
</template>
<script>
import Child from "./Child.vue";
export default {
  components: { Child },
};
</script>

Observations: Both Vue and React offer straightforward approaches to passing props, though Vue’s syntax is closer to HTML conventions. In Vue, the colon : is used to bind data, while React leverages JSX props directly.

Event Emission: Child-to-Parent Communication

Sending data upward—child to parent—can be uniquely handled in Vue vs React examples.

React: Using Callbacks

function Child({ onSend }) {
  return <button onClick={() => onSend("Data from child!")}>Send Up</button>;
}
 
function Parent() {
  const handleData = (data) => alert(data);
  return <Child onSend={handleData} />;
}

Vue: Custom Events

<!-- Child.vue -->
<template>
  <button @click="sendData">Send Up</button>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit("send", "Data from child!");
    },
  },
};
</script>
 
<!-- Parent.vue -->
<template>
  <Child @send="handleData" />
</template>
<script>
import Child from "./Child.vue";
export default {
  components: { Child },
  methods: {
    handleData(data) {
      alert(data);
    },
  },
};
</script>

Key Differences: React relies on passing callback functions as props, keeping everything in JS logic. Vue’s v-on directive (aliased as @) and $emit method give a more event-driven structure that feels natural for those coming from HTML/DOM event models.

Conditional Rendering

Displaying content conditionally is a frequent task in UIs. Here's how Vue vs React handle this:

React: Ternary Operator in JSX

function Greeting({ isLoggedIn }) {
  return <div>{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>;
}

Vue: v-if Directive

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>
<script>
export default {
  props: ["isLoggedIn"],
};
</script>

Summary: Vue's built-in directives like v-if improve readability, while React’s flexibility comes from using plain JavaScript expressions. For simple conditions, both are clean and effective.

List Rendering: Mapping Over Arrays

Rendering lists is incredibly common. Let’s see Vue vs React code for rendering an array of items.

React: Array.map in JSX

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Vue: v-for Directive

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>
<script>
export default {
  props: ["items"],
};
</script>

Insight: Both frameworks require a unique key for each list item to optimize rendering, but Vue’s v-for creates highly readable templates. React’s use of JavaScript’s map method feels more natural if you’re already proficient in JS.

Form Handling

Forms are the backbone of interactive applications. Here’s a direct comparison using a controlled input.

React: Controlled Components

import React, { useState } from "react";
 
function NameForm() {
  const [value, setValue] = useState("");
  return (
    <form>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter name"
      />
      <p>You entered: {value}</p>
    </form>
  );
}

Vue: v-model Directive

<template>
  <form>
    <input v-model="value" placeholder="Enter name" />
    <p>You entered: {{ value }}</p>
  </form>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

Reflection: Vue’s v-model directive simplifies two-way data binding, while React's approach, though more explicit, offers finer control and predictability. Comparing Vue vs React in form controls often comes down to preference and the specific form logic required.

Styling Components

Styling matters, and both Vue and React offer flexibility for organizing your CSS.

React: Inline Styles and CSS Modules

function StyledBox() {
  const boxStyle = {
    padding: "1rem",
    border: "2px solid #42b983",
    color: "#42b983",
  };
  return <div style={boxStyle}>Styled with Inline CSS (React)</div>;
}

React also supports CSS files, CSS-in-JS, and CSS Modules for scoping.

Vue: Scoped Styles in SFC

<template>
  <div class="styled-box">Styled with Scoped CSS (Vue)</div>
</template>
<style scoped>
.styled-box {
  padding: 1rem;
  border: 2px solid #42b983;
  color: #42b983;
}
</style>

Takeaway: Vue’s scoped attribute in SFCs offers automatic CSS scoping. React doesn’t have this built-in, requiring additional tools for style encapsulation.

Lifecycle Methods

Comparing Vue vs React lifecycle methods reveals similarities, but also unique hooks.

React: useEffect Hook

import React, { useEffect } from "react";
 
function Timer() {
  useEffect(() => {
    const timer = setInterval(() => console.log("Tick"), 1000);
    return () => clearInterval(timer);
  }, []);
  return <div>Running timer (React)</div>;
}

Vue: Lifecycle Hooks

<template>
  <div>Running timer (Vue)</div>
</template>
<script>
export default {
  mounted() {
    this.timer = setInterval(() => console.log("Tick"), 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

Comparison: Both Vue and React allow you to tap into the component lifecycle, but Vue’s approach is more declarative with dedicated methods like mounted and beforeUnmount. React hooks offer more modularity but require fuller understanding for complex effects.

Composability and Reusability

Modern applications value composability. Comparing Vue vs React examples clarifies their approaches.

React: Custom Hooks

import { useState } from "react";
 
function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = () => setCount((c) => c + 1);
  return [count, increment];
}
 
function HookCounter() {
  const [count, increment] = useCounter(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Vue: Composition API

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
 
const count = ref(0);
const increment = () => count.value++;
</script>

Perspective: The Vue Composition API (especially setup and refs) brings functional-style composition closer to React’s hooks. Both approaches promote code reuse, but Vue maintains a stronger link with its template-centric design.

Ecosystem and Tooling

Both React and Vue excel thanks to robust ecosystems. In the Vue vs React universe:

  • React features tools like Create React App, Next.js for SSR, and an immense array of third-party libraries via npm.
  • Vue counters with Vue CLI, Vite for rapid development, Nuxt for server-side rendering, and a highly curated plugin environment.

Choosing between Vue vs React is often about community size, library availability, and integration with larger stacks.

Performance: A Brief Note

Both Vue and React are designed for speed, with virtual DOMs and optimized diff algorithms. Real-world performance bottlenecks usually come from poor coding practices or unnecessary re-renders, rather than framework deficiencies.

Learning Curve and Developer Experience

When evaluating Vue vs React, learning curve and experience count.

  • Vue tends to be more approachable for beginners, especially those with HTML/CSS backgrounds. Its clear separation of concerns and simple syntax allow quick results.
  • React has a steeper learning curve but offers immense flexibility and power for advanced use cases, especially in very large or complex applications.

When to Use Vue vs React

Each has strengths for different scenarios:

  • Vue: Rapid prototyping, small to mid-sized apps, or when teams prefer clear template logic mimicking HTML/CSS.
  • React: Large-scale applications, companies betting on a massive ecosystem, or projects needing extensive UI state sharing.

Conclusion: Making an Informed Choice

Throughout these Vue vs React examples, it’s clear that both frameworks can accomplish the same goals with differing syntax and philosophies. By comparing code side-by-side, we see Vue’s declarative, template-driven approach contrasts with React’s JavaScript-centric style.

Ultimately, the best choice hinges on your team’s expertise, project requirements, and long-term needs. Both Vue and React will continue to evolve, but by understanding their similarities and differences at the code level, you can confidently select the right tool for your next innovative web application.

By focusing on practical Vue vs React examples in this guide, we hope you feel empowered to explore further, experiment with both frameworks, and bring your project vision to life.

Ready to take your frontend skills to the next level? Try translating one of your own project features from React to Vue—or vice versa—and see which fits your style best. The more you compare, the more you’ll discover which framework feels like home.

More Posts

Vue vs React Jobs: Which Framework Has Better Career Prospects

June 10, 2025

Vue vs React Differences: Key Features, Pros, and Cons Compared

June 9, 2025