Laravel Inertia Vue vs React: Which Stack Costs More to Build?

Tony Xhepa| 00:09:08|Apr 25, 2026

Chapters5

The host explains testing inertia with view and inertia with react to implement the same contact form feature across two projects and compare token costs and speed.

Tony Xhepa directly compares Laravel Inertia with Vue vs React, measuring token costs and build speed for a simple contact form.

Summary

Tony Xhepa pits two inertia-based implementations against each other—Inertia + Vue and Inertia + React—to answer a practical question: which stack costs more to build? He sets up identical projects and creates the same contact form feature, then records token usage, API duration, wall-clock time, and code changes. He walks through opening both projects, running a comparison in a cloud environment, and then analyzes the session costs (1.76 units for one setup), durations, and line edits. Tony also references a prior Livewire example and notes that React seemed more efficient in this specific test. The walkthrough includes concrete details like 247 vs 245 lines added and the exact code paths in routes, controllers, and the Vue/React components. He even shows the VS Code view of the HTTP controllers, migrations, and the contact form component, tying the numbers to real-world edits. By the end, he presents a practical takeaway for developers choosing between Vue and React within Laravel Inertia when cost and speed matter. If you’re weighing stack choices for a feature with similar scope, Tony’s test offers a hands-on data point rather than theory.

Key Takeaways

Inertia + Vue session cost: 1.76 tokens, API duration 7:47, wall duration 11:30, with 247 lines added and notable IO metrics (input ~4.5k, output ~26.7k).
Inertia + React session cost appears similar (around 1.76 units) but the test notes React as more efficient for this feature, with 245 lines added and slightly different IO characteristics.
The contact form feature is implemented identically in both stacks using a Laravel controller (ContactController), a request (StoreContactRequest), and a TSX/JSX view (contact.tsx) to bind name, email, subject, and message.
The codebase uses the same routes (web.php) and Inertia setup to ensure the only variable is the frontend stack, keeping comparisons apples-to-apples.
Vue.js vs React trade-offs are framed around token-based cost and build speed rather than purely UI quality, with concrete numbers from the test.
The video emphasizes token limits in AI-assisted development and shows how small feature tests can drift in cost between stacks, reinforcing the need for empirical testing in stack decisions.

Who Is This For?

Essential viewing for Laravel developers evaluating Inertia with Vue versus React for cost-conscious feature builds. It’s especially useful for teams weighing token usage and build speed in AI-assisted or cloud-based environments.

Notable Quotes

"Hello friends, Tony here. Welcome."

—Opening line establishing the video and host.

"We are going to test Laravel with inertia and view one project and with inertia and react another project."

—Stating the core experiment and setup.

"React was more efficient than using the Vue.js GS."

—Primary takeaway statement about performance.

"The feature we're going to create is a contact form."

—Defines the test feature used for comparison.

"Now here is the inertia and react. Okay."

—Describes having both stacks ready for comparison.

Questions This Video Answers

How does Laravel Inertia with Vue compare to React in terms of token usage for the same feature?
Which stack is faster to implement a contact form with Inertia in Laravel?
What are the concrete differences in code edits when using Inertia with Vue vs React for the same page?

Laravel InertiaVue.jsReactLaravel Inertia VueLaravel Inertia ReactContact formToken usageBuild speedLivewire referenceCodebase comparison

Full Transcript

Hello friends, Tony here. Welcome. Nowadays uh every day and more we use the AI and also we hit the limits of our tokens. So we spend per day and when we build the projects all not all the projects are the same. So we spend more project more tokens in one project to create some feature more tokens in another project or less in another project. And in today's video, I'm going to test Laravel with inertia and view one project and with inertia and react another project. We are going to create the same feature for both of them and see how much tokens is going to spend for one project and for another. We are going to compare both of them and also which one will be generated faster. I have prepared a project with react and a project with view. Here it is. So view one test and react one test. Now the feature we're going to create is a contact form. I use this also with live wire uh two or three videos ago and I told the chajp to transform this to use also with inertia and react and inertia and view. Now here is the inertia and react. Okay. So let's copy this and I'm have open the react here and also view. Now also we can work with the cloud desktop app but I'm going to use on the terminal. So let's open the cloud. So let's paste here for the react. I'm going to hit enter. And now let's come here and copy the one which is for the inertian view. Copy this. Go to inertian view. Open the cloud code and paste it also here. and we are going to see. Okay friends, so we are back. Both projects are finished. Right now we are going to test but first let's see the session. So here we are inertia with view and inertia with react. The session total cost is for the view is 1.76. Total duration for the API is 7 minutes and 47 seconds. Duration wall is all is 11 minutes and 30 seconds. Total contains is here used by model cloud io 4.5 is 1.1k input and so on. Cloud sonet 4.6 Six 200 input 26.7K output 3.5 m cash read and 85.9 cash right okay so spent 1.76 here which is the total cost current session 58% used now let's see for the react react is only 1 Here we have 1.76 and 1.20 also only 5 minutes and 3 seconds total duration for the API. Here 7 minutes and 47 seconds. Here total duration well is uh 7 minutes and 50 seconds. Here we have 11 minutes and 13 seconds. Okay. The same as we can see 247 lines added also here 245 lines added 15 lines removed 10 lines removed here okay now here we have 1.1k input the same as here the output is 18 output and zero cache zero cash right then the set 50 input Here we have 200 input, 14.1K output, 2.4 amp cache read and 17.9K cash right here we have 85.9 the cost for the view 3 is larger and also the tokens the same thing. Now let's see the projects where to come here. We are in the view one. So let's say contact. Here is the contact page. I'm going to zoom a little bit. And if I say send. Yeah. Also if I go to slash contact here. This used the sidebar which yeah I don't need the sidebar. If I go to dashboard, we are not logged in. So with 30 react anyway, if I use here, send a message. Okay, message sent. And also here, send a message. Message sent. Now let's see the code. I'm going to open both of them with VS code. I'm going to close this and open with VS Code. Let's go up. We have HTTP controllers contact controller and we have the create and store also the store contact message request required the name email subject and message and yeah we have a validation okay then contact message create request validated very good and inertia flash and then a return let's go also the models we have the model here just proable and Then we have also the database migration. Here is the migration. Then if we go to let's go to routes first web routes we have the get contact and post contact. Using the contact controller and JS pages we have the contact tsx. We have created here the interface contact form with name, email, subject and message. And then contact method heading and then we have a form contact form pass in the contact controller store form reset on success and class name also. Okay layout breadcrumbs contact and contact controller create URL. Now let's uh open this one with VS code which is right here. I'm going to zoom in also this. Let's close and also let's close this one and let's open the app http we have controllers also here contact controller the same thing create method and then the store using the store contact yes and return inertia flash good let's go to models the same thing provillable name email okay then we have a database migration the same. We have the routes the same. Okay. Then we have also the resources JS pages and the contact view. And here we have the define options layout is null. for that here on the V.JS JS we don't have the layout because layout is not has defined as a node very good then we have yeah the same thing so we have a form here using the store form we bind and we have imported the store here from the routes contact so using the laravel wavefinder routes okay that's it the project and also the cost I showed you. We have the same project with Laravel but the different stack. So here we use inertia with view and inertia with react using inertia with react in this case and in my example because if I create another one I don't know if it's going to do the same thing but right now using react was more efficient than using the Vue.js GS the usage for the React was more or less than the usage for Vue.js creating only this feature only for this feature creating the Vue.GS contact page was $18. Okay friends now if you like such a videos don't forget to subscribe to my channel like the video share with your friends and I'm going to see you in another one. All the best.