Yutaro Koizumi
2025-09-30
A Frontend Night to Know the Respective Merits of Next.js vs Nuxt
Affiliation: ANDPAD Inc.
- ERP Frontend Tech Lead
- Responsible for "Cost Management" (Nuxt) to create and confirm estimates and budgets for construction sites
- Responsible for "Document Approval" (React Router / Nuxt) to centralize approval workflows
I write articles on Zenn and the ANDPAD TECH BLOG:
- Congratulations on the official release! Understanding the appeal of Nuxt3 in 5 themes - Zenn
- Migrated from Next.js to React Router with the help of GitHub Copilot Agent - ANDPAD Tech Blog
- Vite: Supporting Multi-Product Development with Vue & React - Speaker Deck
A cloud-based construction project management service that provides integrated management from on-site efficiency to business improvement.
We are promoting the digital transformation (DX) of the construction industry by developing various products for each team.
Note: There are also unannounced products and products not listed here.
- Each team can choose between React and Vue, and new products are still being launched using both
- This allows team members to use the technology best suited for the products they are skilled in
-
The goal is not to say, "You should use Vue over React!" but to help you understand that "each has its own merits"
- The main objective is for people who primarily use React to learn about the benefits of Vue and to dispel any negative images they might have
-
I will focus more on the differences between Vue and React than on Nuxt vs. Next.js
- It's often the case that you choose Next.js because you want to use React, and you choose Nuxt because you want to use Vue
- Of course, I will also talk about Nuxt
Note: I'll be speaking quickly as there is a lot of content to cover.
About the common misunderstandings of Vue, and why they happen.
Reason for misunderstanding: Being influenced by the impression of the Vue 2 era.
-
In the Vue 2 era, there were situations where it was difficult to add types within
<template>tags or foremit, but this has been completely resolved in Vue 3 -
It has already been over 5 years since the introduction of the Composition API, which has a syntax similar to React Hooks
-
TypeScript is already the standard in the official documentation and in the templates for new projects
-
Toolsets like Vue Language Tools (Volar) provide official extensions and type checking
Reason for misunderstanding: Because the migration from Vue 2 → 3 was genuinely difficult.
The migration from Vue 2 / Nuxt 2 to 3 involved numerous breaking changes, including in related libraries, which placed a heavy burden on developers and caused confusion in the community.
※Excerpt from Vue Fes Japan 2023 Keynote
Since Vue 3 was released in 2020, no breaking changes have been introduced.
-
Convenient new syntaxes offered as options, such as the
<script setup>syntax anddefineModel() -
Vapor Mode, a compilation strategy that doesn't use a virtual DOM, can be used alongside the existing mode on a per-component basis
-
Leading the development of Rolldown, a high-speed Rust-based bundler that maintains almost complete compatibility with Rollup
→ The continuous internal performance improvements while maintaining the API demonstrate the excellence of Vue 3's foundation.
Reason for misunderstanding: Because it's convenient for explaining the differences between Vue and React.
When asked, "What's the difference between React and Vue?", one tends to want to give a simple, clear-cut answer.
"Vue is easy to learn but not suitable for complex development, while React is difficult but suitable for large-scale development." This explanation is clear and easy to understand.
| React | Vue | |
|---|---|---|
| Ease of Learning | △ Difficult | ◎ Simple |
| Flexibility & Scalability | ◎ High | △ Low |
| Suitable Applications | Large-scale | Small to Medium-scale |
| In a Nutshell? | Simple | Easy |
→ As many people explain it this way, this image gets reproduced.
Is this comparison chart really correct?
Reason for misunderstanding: Because it's convenient for explaining the differences between Vue and React.
-
React Hooks and the Composition API are extremely similar, so it's not as if only one's adaptability changes drastically
-
It's not often said that "React is difficult for small-scale development," so it's strange to say it only for Vue
The difficulty in large-scale development is not a framework issue, but a developer's design skill issue.
-
Both Vue and React have anti-patterns that shouldn't be used in design or implementation
- Mixins, Providers, Global Stores, overuse of
anyin TypeScript, excessive commonality, etc.
- Mixins, Providers, Global Stores, overuse of
-
Both Vue and React make it easy to create small-scale applications, but for large-scale development, a lot of knowledge needs to be learned
-
Just because the initial learning cost is low doesn't mean you can build any application with only that knowledge
-
Vue also has good compatibility with TypeScript
-
Vue has also come to place great importance on backward compatibility
-
Vue is also suitable for large-scale development
→ But isn't React fine then?
The code looks similar, but "how value changes are reflected" is different.
React:
Vue:
The code looks similar, but "how value changes are reflected" is different.
-
In React, whenever the state is updated, the entire component function is re-rendered, and calculations written at the top level are also re-executed
-
Vue's setup is executed only once at the initial render. When a ref is updated, only the dependent computed function is individually recalculated
React reflects changes by re-rendering, which replaces the component and all its child components with new ones whenever values like state or props change.
→ This makes it easy for developers to control behaviors like update timing, so it's easy to tune performance themselves, but if you're not careful, it can lead to performance degradation.
Vue automatically tracks ref and props as reactive values, and when those values are updated, it identifies dependencies like computed properties and DOM elements, and finely updates only the changed parts.
→ There's no need to declare dependency variables yourself, and performance is automatically optimized, but it's difficult for developers to completely control the behavior.
-
In most results from js-framework-benchmark, Vue 3 outperforms React, and with Vapor Mode, further optimization is underway
-
For many developers, it's highly possible that automatically optimized Vue code will outperform manually optimized React code
-
The mechanism of automatically tracking dependencies is adopted by SolidJS as Fine-Grained Reactivity (fine-grained reactivity) and is becoming a trend
-
React Compiler and the react-hooks/exhaustive-deps lint rule also perform dependency detection mechanically at compile time
→ It's not a matter of "either/or"; they can't be dismissed so easily.
Vue has many libraries that are officially maintained or maintained by Vue/Nuxt core members, which alone cover the essential functionalities.
- Framework: Nuxt
- Build Tool: Vite
- Router: Vue Router
- Store: Pinia
- Extension: Vue Official (Volar)
- Test Tool: Vitest
-
The presence of the
<style>tag eliminates the need to introduce or learn CSS in JS -
Nuxt supports various environments like SSR, SPA, and SSG, so there's no need to change the framework even if requirements change later
-
Thanks to VueUse, a collection of over 200 utility functions, you don't need to individually add libraries for each function
- For example,
useElementVisibilityoruseMediaQuery, etc.
- For example,
By adopting Vue / Nuxt, you can concentrate on the development of the product itself without worrying about libraries or implementation.
Vite
A high-speed, highly extensible bundler tool released in 2020 by Evan You, the creator of Vue. Frameworks like Nuxt, React Router, Tanstack Router, SvelteKit, and many others use Vite as the foundation for their JavaScript bundler and build processes. It is also mentioned in the React documentation as a recommended technology for SPAs, replacing create-react-app.
Vitest
A Vite-based testing tool developed by Vue core committer Anthony Fu. It has grown into a tool used in all kinds of frontend development, combining high speed with high compatibility with Jest.
In addition, UnJS, Oxlint, Volar.js, and others are open-source and support other libraries.
-
The development of versatile tools makes it easier to maintain the diversity of the JS ecosystem, and Vue itself is more likely to be maintained as one of the choices
-
Because Vue core members are involved in the development, it can be expected that these tools' new features will also prioritize compatibility with Vue
-
The high technical capabilities of the Vue development team lead to trust that Vue will be able to respond to future technological changes
- The decisiveness to say, "We will start developing Vapor Mode with the same API, inspired by SolidJS," is a testament to this
In 2024, over 750 people attended, making it one of Japan's largest frontend events. It was a valuable opportunity for lectures by Evan You, Anthony Fu, Johnson Chu who worked on Volar and alien-signals, and Daniel Roe, the Nuxt core team leader, who came to Japan.
Currently, it also covers topics related to the Vue community like Vite, Oxc, and Rolldown, strengthening its aspect as a festival for the entire frontend, not just Vue.
-
Active information dissemination and feedback on a user basis
-
Continuous maintenance and improvement of user-led related tools
-
The Japanese community is active, leading to a wealth of information and events in Japanese
→ The sustainability and future potential of OSS are directly linked to the excitement of the community.
A panel discussion inviting core members from Vue, React, and Svelte, titled "Talking about the Future of the Frontend - The Next 10 Years for React/Vue.js/Svelte" will also be held.
October 25th, 2025 (Saturday), general tickets are not yet on sale!