First, install the Inertia server-side adapter using the Composer package manage
composer require inertiajs/inertia-laravelNext, setup the root template that will be loaded on the first page visit to your application. This will be used to load your site assets (CSS and JavaScript), and will also contain a root <div> in which to boot your JavaScript application.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
This template should include your assets, as well as the @inertia and @inertiaHead directives.
By default, Inertia's Laravel adapter will assume your root template is named app.blade.php. If you would like to use a different root view, you can change it using the Inertia::setRootView() method.
Next we need to setup the Inertia middleware. You can accomplish this by publishing the HandleInertiaRequests middleware to your application, which can be done using the following Artisan command.
php artisan inertia:middleware
Once the middleware has been published, append the HandleInertiaRequests middleware to the web middleware group in your application's bootstrap/app.php file.
use App\Http\Middleware\HandleInertiaRequests;
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})This middleware provides a version() method for setting your asset version, as well as a share() method for defining shared data.
That's it, you're all ready to go server-side! Now you're ready to start creating Inertia pages and rendering them via responses.
use Inertia\Inertia;
class EventsController extends Controller
{
public function show(Event $event)
{
return Inertia::render('Event/Show', [
'event' => $event->only(
'id',
'title',
'start_date',
'description'
),
]);
}
}You have to set up the vite js and configure it to work perfectly with the laravel and vue js architecture
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});
If you want to work with the tailwindcss (maybe you will) you have to configure it with the laravel and vuejs architecture
import defaultTheme from 'tailwindcss/defaultTheme';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
First of all install the vuejs
npm install vue
First, install the Inertia client-side adapter corresponding to your framework of choice.
npm install @inertiajs/vue3
npm install @vitejs/plugin-vue
Next, update your main JavaScript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component.
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
The setup callback receives everything necessary to initialize the client-side framework, including the root Inertia App component.
You have to set up the entry point into the laravel app. Please copy and past the code into the App.js in under you resources/js/App.js file
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
When you are on shared hosting you have to set up the software so that it can work on the hosting efficiently.
For production update the app.blade.php code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>{{ config('app.name') }}</title>
<!-- Change these scripts and css paths with the actual build in css and js files -->
<link rel="stylesheet" href="{{ asset('build/assets/app-BtW0pRbl.css') }}">
<script src="{{ asset('build/assets/app-BOO1F6JN.js') }}" defer></script>
<!-- Manually include dynamic head -->
<script>
document.title = 'Inertia Example'; // You can change this dynamically
</script>
</head>
<body>
<div id="app" data-page="{{ json_encode($page) }}"></div>
<!-- Mounting Inertia -->
<script>
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
createInertiaApp({
resolve: name => import(`./Pages/${name}.vue`),
setup({ el, App, props }) {
createApp({ render: () => h(App, props) })
.mount(el);
},
});
</script>
</body>
</html>
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</Layout>
</template>
use Inertia\Inertia;
class UserController extends Controller
{
public function show(User $user)
{
return Inertia::render('User/Show', [
'user' => $user
]);
}
}
Route::get('/test', function(){
return Inertia::render('Test', [
'user' => 'protik'
]);
});
You have to build the frontend with this command to genereate the production ready compressed assets and css, js and manifest.json files
npm run build
After this you have to upload the files on the production server
And that's how you can create and develop a laravel + vue + inertia project