Install the Laravel package of Inertia.js and register the HandleInertiaRequests middleware; 2. Install front-end dependencies such as @inertiajs/inertia-vue3 and configure app.js; 3. Create Vue page components in resources/js/Pages and return through Inertia::render; 4. Pass data from Laravel to the component and automatically receive as props; 5. Use router.get/post for refreshless navigation and form submission to achieve the SPA experience, without writing APIs, and finally inject the page through the @inertia directive and complete rendering.
Using Inertia.js with Laravel lets you build modern, single-page applications (SPAs) without writing API endpoints or JavaScript-heavy frontend code. Inertia connects Laravel backends with frontend frameworks like Vue or React, making page transitions smooth while keeping your code simple.
Here's how to set it up and use it effectively.
1. Install and Set Up Inertia.js in Laravel
First, make sure you have a Laravel project ready. Then install the Inertia server-side package:
composer requires inertiajs/inertia-laravel
Next, publish the middleware and register it in your app/Http/Kernel.php :
php artisan inertia:middleware
This command adds the HandleInertiaRequests middleware. You'll need to manually register it in the $middlewareGroups under web :
\App\Http\Middleware\HandleInertiaRequests::class,
Now, Inertia is ready on the Laravel side.
2. Set Up the Frontend (Vue Example)
Install the required JavaScript dependencies:
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@^3.0.0
If you're using React, use @inertiajs/inertia-react instead.
Create an app.js file (usually in resources/js ) to configure Inertia with Vue:
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
createInertiaApp({
resolve: name => require(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) })
app.use(plugin)
app.mount(el)
},
})
// Optional: Address progress bar during navigation
InertiaProgress.init() Make sure your webpack.mix.js compiles this file:
mix.js('resources/js/app.js', 'public/js') .vue()
Then compile:
npm run dev
Include the compiled JS and CSRF meta tag in your main layout ( resources/views/app.blade.php ):
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Inertia App</title>
</head>
<body>
@inertia
</body>
</html> The @inertia directive is where your Inertia pages will be injected.
3. Create and Render Inertia Pages
Inertia works by returning a page component from your Laravel routes/controllers.
Create a Pages directory in resources/js/Pages . Add a simple Home.vue :
<template>
<h1>Welcome to the Inertia App!</h1>
</template>
<script>
export default {
name: 'Home'
}
</script> Now, in a Laravel route ( routes/web.php ), return the page using Inertia:
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Home');
}); When you visit / , Laravel sends the Home.vue component to the frontend, and Inertia renders it — no API needed.
4. Pass Data to Pages
You can send data from Laravel to your Vue components:
return Inertia::render('User/Show', [
'user' => [
'id' => 1,
'name' => 'John Doe',
'email' => 'john@example.com'
]
]); Access it in your Show.vue component:
<template>
<div>
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</div>
</template>
<script>
export default {
props: ['user']
}
</script>Props are automatically passed as component props.
5. Navigation and Form Submissions
Use Inertia to navigate or submit data:
<script>
import { router } from '@inertiajs/inertia'
export default {
methods: {
visitProfile() {
router.get('/profile')
},
submitForm() {
router.post('/users', {
name: 'Jane',
email: 'jane@example.com'
})
}
}
}
</script>Inertia handles these requests and updates the page without full reloads.
For forms, consider using @inertiajs/progress and @inertiajs/forms (if using Vue) for better UX.
Bonus: Use Inertia with React or Other Frameworks
Swap inertia-vue3 for inertia-react and adjust the setup accordingly. The Laravel backend stays the same — only the frontend adapter changes.
Basically, Inertia bridges Laravel and your frontend seamlessly. You avoid building a separate API, keep using Laravel controllers, and still get a fast, SPA-like experience. It's not magic — but it feels like it.
The above is the detailed content of How to use Inertia.js with Laravel?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to set environment variables in PHP environment Description of adding PHP running environment variables
Jul 25, 2025 pm 08:33 PM
There are three main ways to set environment variables in PHP: 1. Global configuration through php.ini; 2. Passed through a web server (such as SetEnv of Apache or fastcgi_param of Nginx); 3. Use putenv() function in PHP scripts. Among them, php.ini is suitable for global and infrequently changing configurations, web server configuration is suitable for scenarios that need to be isolated, and putenv() is suitable for temporary variables. Persistence policies include configuration files (such as php.ini or web server configuration), .env files are loaded with dotenv library, and dynamic injection of variables in CI/CD processes. Security management sensitive information should be avoided hard-coded, and it is recommended to use.en
What is Configuration Caching in Laravel?
Jul 27, 2025 am 03:54 AM
Laravel's configuration cache improves performance by merging all configuration files into a single cache file. Enabling configuration cache in a production environment can reduce I/O operations and file parsing on each request, thereby speeding up configuration loading; 1. It should be enabled when the application is deployed, the configuration is stable and no frequent changes are required; 2. After enabling, modify the configuration, you need to re-run phpartisanconfig:cache to take effect; 3. Avoid using dynamic logic or closures that depend on runtime conditions in the configuration file; 4. When troubleshooting problems, you should first clear the cache, check the .env variables and re-cache.
How to develop AI intelligent form system with PHP PHP intelligent form design and analysis
Jul 25, 2025 pm 05:54 PM
When choosing a suitable PHP framework, you need to consider comprehensively according to project needs: Laravel is suitable for rapid development and provides EloquentORM and Blade template engines, which are convenient for database operation and dynamic form rendering; Symfony is more flexible and suitable for complex systems; CodeIgniter is lightweight and suitable for simple applications with high performance requirements. 2. To ensure the accuracy of AI models, we need to start with high-quality data training, reasonable selection of evaluation indicators (such as accuracy, recall, F1 value), regular performance evaluation and model tuning, and ensure code quality through unit testing and integration testing, while continuously monitoring the input data to prevent data drift. 3. Many measures are required to protect user privacy: encrypt and store sensitive data (such as AES
How to make PHP container support automatic construction? Continuously integrated CI configuration method of PHP environment
Jul 25, 2025 pm 08:54 PM
To enable PHP containers to support automatic construction, the core lies in configuring the continuous integration (CI) process. 1. Use Dockerfile to define the PHP environment, including basic image, extension installation, dependency management and permission settings; 2. Configure CI/CD tools such as GitLabCI, and define the build, test and deployment stages through the .gitlab-ci.yml file to achieve automatic construction, testing and deployment; 3. Integrate test frameworks such as PHPUnit to ensure that tests are automatically run after code changes; 4. Use automated deployment strategies such as Kubernetes to define deployment configuration through the deployment.yaml file; 5. Optimize Dockerfile and adopt multi-stage construction
Explain Laravel Eloquent Scopes.
Jul 26, 2025 am 07:22 AM
Laravel's EloquentScopes is a tool that encapsulates common query logic, divided into local scope and global scope. 1. The local scope is defined with a method starting with scope and needs to be called explicitly, such as Post::published(); 2. The global scope is automatically applied to all queries, often used for soft deletion or multi-tenant systems, and the Scope interface needs to be implemented and registered in the model; 3. The scope can be equipped with parameters, such as filtering articles by year or month, and corresponding parameters are passed in when calling; 4. Pay attention to naming specifications, chain calls, temporary disabling and combination expansion when using to improve code clarity and reusability.
PHP development user permission management monetization PHP permission control and role management
Jul 25, 2025 pm 06:51 PM
User permission management is the core mechanism for realizing product monetization in PHP development. It separates users, roles and permissions through a role-based access control (RBAC) model to achieve flexible permission allocation and management. The specific steps include: 1. Design three tables of users, roles, and permissions and two intermediate tables of user_roles and role_permissions; 2. Implement permission checking methods in the code such as $user->can('edit_post'); 3. Use cache to improve performance; 4. Use permission control to realize product function layering and differentiated services, thereby supporting membership system and pricing strategies; 5. Avoid the permission granularity is too coarse or too fine, and use "investment"
How to use PHP combined with AI to analyze video content PHP intelligent video tag generation
Jul 25, 2025 pm 06:15 PM
The core idea of PHP combining AI for video content analysis is to let PHP serve as the backend "glue", first upload video to cloud storage, and then call AI services (such as Google CloudVideoAI, etc.) for asynchronous analysis; 2. PHP parses the JSON results, extract people, objects, scenes, voice and other information to generate intelligent tags and store them in the database; 3. The advantage is to use PHP's mature web ecosystem to quickly integrate AI capabilities, which is suitable for projects with existing PHP systems to efficiently implement; 4. Common challenges include large file processing (directly transmitted to cloud storage with pre-signed URLs), asynchronous tasks (introducing message queues), cost control (on-demand analysis, budget monitoring) and result optimization (label standardization); 5. Smart tags significantly improve visual
How to build a content payment platform through PHP How to implement PHP paid reading system
Jul 25, 2025 pm 06:30 PM
To build a PHP content payment platform, it is necessary to build a user management, content management, payment and permission control system. First, establish a user authentication system and use JWT to achieve lightweight authentication; second, design the backend management interface and database fields to manage paid content; third, integrate Alipay or WeChat payment and ensure process security; fourth, control user access rights through session or cookies. Choosing the Laravel framework can improve development efficiency, use watermarks and user management to prevent content theft, optimize performance requires coordinated improvement of code, database, cache and server configuration, and clear policies must be formulated and malicious behaviors must be prevented.
