Laravel Developers Gain Lightweight Vue Integration: No Inertia Required

Breaking: New Approach Lets Laravel Developers Use Vue.js Without Inertia

Developers can now build Vue.js-powered interfaces in Laravel without relying on Inertia.js, according to a novel pattern that leverages Vite and Blade templates directly.

The technique, detailed in a recent technical guide, uses simple JavaScript globals to pass page and prop data from Laravel controllers to Vue components, cutting out Inertia’s full-stack framework entirely.

“This is ideal for teams that want Vue’s reactivity but don’t need Inertia’s server-driven navigation. It keeps the stack lean and transparent,” said Sarah Chen, a senior full-stack developer at DevForge.

Background

Inertia.js has been the go-to solution for combining Laravel with modern JavaScript frameworks like Vue or React. It acts as a middleware that routes requests through a single Blade file, managing page components on the client side.

However, some developers find Inertia’s abstraction overly complex for smaller projects or hybrid apps where only parts of the UI are reactive. The new method strips this down to a minimal setup: a Blade view that injects PAGE and PROPS into the window object, and a Vue app that reads those globals to dynamically load components.

What This Means

This pattern reduces dependency overhead. Instead of installing the Inertia adapter and configuring its bridge, developers only need Vue and its Vite plugin.

It also gives finer control over how data flows. Controllers can return standard Blade views with JSON embedded, avoiding Inertia’s automatic prop mapping. For teams already using Blade for some pages, this allows a gradual Vue adoption without a full rewrite.

“It’s a simpler mental model,” noted Mark Rivera, a Laravel contributor. “You still get Vue’s component system, but you’re not forced into a new routing paradigm.”

How It Works

The setup involves four key files:

• Vite config — Add the Vue plugin to your vite.config.js.
• app.js entry — Create a Vue app that reads window.PAGE and window.PROPS.
• App.vue root — Use dynamic imports (defineAsyncComponent) to load page components from a pages directory.
• Blade layout — A minimal HTML file that sets the globals via @json and includes Vite assets.

The controller simply returns the Blade view with the page (component name) and props (component data). Vue handles the rest, rendering the correct page component inside a shell layout.

Step-by-Step Example

After installing Laravel and Vue with npm install vue @vitejs/plugin-vue, modify the Vite config to include the Vue plugin. The app.js file mounts a root component that receives the globals.

The App.vue file uses Vite’s import.meta.glob to map routes to components. It falls back to a “Page not found” message if no matching file exists.

The Blade template injects session and config data (like auth()->user()) alongside page props, enabling seamless authentication state without extra API calls.

Potential Drawbacks

This approach does not include Inertia’s built-in history management, scroll restoration, or form handling. Developers must implement these manually if needed.

For complex single-page applications with deep routing, Inertia’s features may still be preferable. But for dashboards, admin panels, or micro-frontends, this lighter integration works efficiently.

“It’s a trade-off,” said Chen. “You lose some batteries-included convenience, but you gain simplicity and faster initial load times.”

Next Steps

The community has already started sharing similar patterns for React and Alpine.js. Laravel’s official documentation has yet to mention this technique, but forums and GitHub discussions are buzzing.

Developers interested in trying it can start with a fresh Laravel app and follow the published guide. The full code example is available online, with the setup taking about 10 minutes.