Ein „Hallo Welt – Hello Word“ für Inertiajs mit Laravel 8 und Vue3

Voraussetzungen

Um Inertiajs mit Laravel 8 und Vue3 zu nutzen sind folgende Kenntnisse erforderlich und die entsprechende Software auf Deinem Webserver:

Grundlegende Kenntnisse im Umgang mit node und npm, composer, php, SQL und HTML, CSS, Javascript

Installation

Öffne deine Shell als „Webuser“ und erstelle ein neues Laravel Projekt in Deinem Webverzeichnis. Der „create-project“ Befehl erstellt ein neues Verzeichnis, welches ein Unterverzeichnis „public“ enthält. Dieses muss deine neue Webroot werden.

Neues Projekt in Laravel erstellen

composer create-project --prefer-dist laravel/laravel meinProjekt

Das Verzeichnis „MeinProjekt“ wird angelegt und alles notwendige für Laravel erstellt.

Webroot umlegen

Lege dein WebRoot um auf den Ordner „public“ im neuangelegtem Verzeichnis, so dass beim Aufruf deiner Domain die index.php in der Verzeichnis ./public aufgerufen wird.

Die Laravelstartseite müsste jetzt beim Aufruf deiner Webseite erscheinen.

Inertiajs dem Laravel Projekt hinzufügen

In dem Ordner „./meinProjekt/“ wird die neu erstelle Composer.json um „inertiajs/inertia-laravel“ erweitert.

composer require inertiajs/inertia-laravel

Die Middleware konfigurieren

php artisan inertia:middleware

In der Datei ./MeinProjekt/app/Http/Kernel.php muss der Eintrag

\App\Http\Middleware\HandleInertiaRequests::class,

zu dem Array $middlewareGroups[‚web‘] als letzter Eintrag hinzugefügt werden.

Clientseitige Abhängigkeiten mit dem node package manager verwalten

npm install @inertiajs/inertia @inertiajs/inertia-vue3
npm install vue@next
npm install @inertiajs/progress

Dateien, app.blade.php, app.js und webpack-mix.js, anpassen

Das Template „app.blade.php“ mit dem Intertia-Code erstellen bzw. ersetzen.

./MeinProjekt/resources/views/app.blade.php mit diesem Code erzeugen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

„createInertiaApp“-Aufruf in ./MeinProjekt/resources/js/app.js einfügen

Den Inhalt der Datei ./MeinProjekt/resources/js/app.js mit folgendem Code austauschen, bzw. ergänzen:

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
 
InertiaProgress.init();

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

webpack.mix.js

const mix = require("laravel-mix");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        //
    ]);

mix.webpackConfig({
    output: {
        chunkFilename: "js/[name].js?id=[chunkhash]",
    },
});

Vue-Template erstellen

Der Ordner „./MeinProjekt/resources/js/Pages“ muss erstellt werden, siehe hierzu auch die resources/js/app.js.

Erstelle ein neues Template, Hallo.vue.

<template>
    <div>
        <h1>Hallo {{ welt }}</h1>
    </div>
</template>

<script>
export default {
    props: ["welt"],
};
</script>

routes/web.php anpassen

Füge der ./MeinProjekt/routes/web.php den use-Befehl „use Inertia\Inertia“ hinzu und passe die Route an, in dem statt view() der Aufruf Inertia::render() retuniert wird.


<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Home', ['welt' => 'Andreas Wiemer']);
});

Installiere und kompiliere die Pakete mit npm

npm ci
npm run dev

Der Ordner „node_modules“ wurde dem Projekt hinzugefügt. Siehe in die „packages.json“ für die Befehle zur Kompilierung, Minifizierung und Bereitstellung der Assets, also der Javascript- und CSS-Dateien. Das kann jederzeit erfolgen und wird später nochmal erforderlich sein.

Jetzt kann die Seite aufgerufen werden!

Andreas Wiemer

Webmaster