Laravel – Inertia js Installation

Laravel – Inertia js Installation

1. Server Side Installation

A. Installation

  • composer create-project laravel/laravel Laravel-inertia
  • composer require inertiajs/inertia-laravel
  • composer require laravel/ui
  • php artisan ui react –auth
  • npm install & npm run dev

 

B. Root Template

<!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>

 

2. Client Side Installation

npm install @inertiajs/react

A. Initialize App

1. create app.blade.php file and paste this code

<!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>

 

2. goto resources/js/components/example.jsx

import { createInertiaApp } from ‘@inertiajs/react’

import { createRoot } from ‘react-dom/client’

createInertiaApp({

resolve: name => {

const pages = import.meta.glob(‘./Pages/**/*.jsx’, { eager: true

})

return pages[`./Pages/${name}.jsx`] },

setup({ el, App, props }) {

createRoot(el).render(<App {props} />)

},

})

 

3. web.php

use Inertia\Inertia;
Route::get(‘/’, function () {
    return Inertia::render(‘app’);
});

Leave a Reply