Tutorial: Inertia.js mit Laravel nutzen

Inertia.js ist eine Schnittstelle zwischen Vue.js und Laravel. Damit ist es möglich, die Routen und Variablen aus Laravel recht einfach in Vue.js zu nutzen, ohne dafür ständig Ajax-Abfragen schreiben zu müssen.

Installation

Im ersten Schritt installieren wir den Inertia.js-Adapter mit Composer:

composer require inertiajs/inertia-laravel

Nun müssen den Vue.js-Adapter von Inertia installieren:

npm install @inertiajs/inertia @inertiajs/inertia-vue --save

Außerdem benötigen wir noch @babel/plugin-syntax-dynamic-import.

npm install @babel/plugin-syntax-dynamic-import --save

Das Plugin wird in der /webpack.mix.js registriert:

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.runtime.esm.js',
            '@': path.resolve('resources/js/components'),
        },
    }})
.babelConfig({
    plugins: ['@babel/plugin-syntax-dynamic-import'],
});

Und in der /ressources/js/app.js sollte folgendes stehen:

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
        },
    }),
}).$mount(app)

Root-Template anlegen

Die offizielle Dokumentation von Inertia.js Laravel schlägt vor, die Datei app.blade.php mit folgenden Template anzulegen:

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

Wenn man dieses Template mit folgender Router direkt aufruft, bekommt man die Meldung, dass die Variable $page nicht vorhanden ist:

Route::get('/', function () {
    return view('app');
});

Das liegt daran, dass diese view nicht direkt aufgerufen wird, sonder über die Inertia::render-Funktion. Also passen wir die Route entsprechend an:

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'user' => 'Stefan',
    ]);
});

Wenn wir nun die Route im Browser aufrufen, gibt es folgendes Ergebnis:

<!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="/css/app.css" rel="stylesheet">
        <script src="/js/app.js" defer></script>
    </head>
    <body>
    <div id="app" data-page="{&quot;component&quot;:&quot;Welcome&quot;,&quot;props":{&quot;user&quot;:&quot;Stefan&quot;},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:null}"></div>
    </body>
</html>

Es wird hier ein div erstellt, in dem der Name der Komponente und die Eigenschaften zugewiesen werden.

Vue.js Komponente erstellen

Jetzt ist der richtige Zeitpunkt, um unsere Vue.js-Komponente zu erstellen. /ressources/js/components/Pages/Welcome.vue:

<template>
    <div>
        Hallo
        {{user}}    </div>
</template>

<script>
    export default {
        props: ['user']
    }
</script>

Nun müssen wir noch das JavaScript kompilieren:

 npm run watch

Als Ergebnis wird im Browser "Hello Stefan" angezeigt.

Inertia in den Chrome Dev Tools

Ein Blick in die Chrome Dev Tools zeigt, wie der Aufruf intern funktioniert:

In den Eigenschaften der Inertia-Komponente befindet sich die aktuelle Seite und dessen Url. Die Parameter aus Laravel werden an unsere Welcome-Komponente übergeben:

Link erstellen

Das besondere an Inertia ist ja die Verlinkung. Also passen wir die Route an, um den Namen dynamisch anzuzeigen:

Route::get('/{name}', function ($name) {
    return Inertia::render('Welcome', [
    'user' => $name,
    ]);
});

Beim Aufruf von /stefan wird die gleiche Seite angezeigt wie zuvor. Jetzt wollen wir einen Link für unseren Kollegen Peter in der Welcome.vue erstellen:

<template>
    <div>
        Hallo
        {{user}}        <br><br>
        <inertia-link href="/peter">Peter</inertia-link>
    </div>
</template>

<script>
    export default {
        props: ['user']
    }
</script>

Wenn wir auf den Link klicken, wird nicht mehr die komplette Seite aufgerufen. Es werden nur noch die Variablen der View mit Ajax geholt:

Zusammenfassung

Mit diesem Vorgehen kann man Vue.js beim ersten Aufruf deutlich beschleunigen, da keine zusätzlichen Ajax-Requests nötig sind. Alle weiteren Aufrufe laufen aber performant über Ajax, so dass das komplette HTML nicht mehr benötigt wird. Weitere Möglichkeiten von Inertia findet ihr in der offiziellen Dokumentation.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project