\n
Warum SPA?<\/h2>\n
Bevor wir fragen k\u00f6nnen, warum wir Inertia nutzen sollten, m\u00fcssen wir zuerst fragen: „Warum SPA?“<\/p>\n
Warum sollte jemand client-seitig gerenderte Anwendungen den traditionellen server-seitigen Anwendungen vorziehen? Was w\u00fcrde einen Full-Stack-Laravel-Entwickler dazu bringen, sich von Blade-Komponenten<\/a> zu verabschieden?<\/p>\n Die kurze Antwort: Weil Geschwindigkeit und Reaktionsf\u00e4higkeit f\u00fcr eine erfolgreiche Nutzeransprache unerl\u00e4sslich sind.<\/p>\n Bei MPAs sendet der Browser st\u00e4ndig Abfragen an das Backend, das dann zahlreiche Datenbankabfragen ausf\u00fchrt. Nachdem die Datenbank und der Server die Abfragen verarbeitet und an den Browser geliefert haben, wird die Seite gerendert.<\/p>\n SPAs sind jedoch anders. Die Anwendung bringt alles, was der\/die Nutzer\/in ben\u00f6tigt, direkt auf die Seite, sodass der Browser keine Abfragen mehr senden oder die Seite neu laden muss, um neue HTML-Elemente zu rendern.<\/p>\n Wegen dieses einzigartigen Nutzererlebnisses dr\u00e4ngen viele namhafte Unternehmen darauf, ihre Websites in Single-Page-Anwendungen umzuwandeln.<\/p>\n Allerdings kann es f\u00fcr Laravel-Entwicklerinnen und -Entwickler schwierig sein, eine Single-Page-Anwendung zu erstellen, weil sie dann Vue.js oder React anstelle von Blade-Templates verwenden m\u00fcssten, wodurch viele Laravel-Vorz\u00fcge verloren gehen, die Zeit und M\u00fche sparen.<\/p>\n Mit Inertia.js hat sich das jedoch ge\u00e4ndert.<\/p>\n Wenn Laravel-Entwickler, vor Inertia, Web-SPAs mit Vue bauen wollten, mussten sie APIs einrichten und JSON-Daten mit Laravel zur\u00fcckgeben, und dann etwas wie AXIOS verwenden, um die Daten in Vue-Komponenten abzurufen. Au\u00dferdem br\u00e4uchten sie etwas wie den Vue Router, um Routen zu verwalten, was bedeuten w\u00fcrde, dass Laravel-Routing sowie Middlewares und Controller wegfallen w\u00fcrden.<\/p>\n Inertia.js hingegen erm\u00f6glicht es Entwicklern, moderne einseitige Vue-, React- und Svelte-Apps mit klassischem serverseitigem Routing und Controllern zu erstellen. Inertia wurde f\u00fcr Laravel-, Ruby on Rails- und Django-Entwickler entwickelt, damit sie Apps erstellen k\u00f6nnen, ohne ihre Programmiertechniken wie das Erstellen von Controllern, das Abrufen von Daten aus einer Datenbank und das Rendern von Ansichten zu \u00e4ndern<\/p>\n Dank Inertia.js werden sich Laravel-Entwickler wie zu Hause f\u00fchlen.<\/p>\n Wenn du eine SPA nur mit Laravel und Vue erstellst, erh\u00e4ltst du zwar eine vollst\u00e4ndige JavaScript-Seite f\u00fcr dein Frontend, aber das bedeutet nicht, dass du eine Single-Page-App erleben kannst. Jeder angeklickte Link f\u00fchrt dazu, dass dein clientseitiges Framework beim n\u00e4chsten Laden der Seite neu gestartet wird.<\/p>\n An dieser Stelle kommt Inertia ins Spiel.<\/p>\n Inertia ist im Grunde eine Client-seitige Routing-Bibliothek. Sie erm\u00f6glicht es dir, zwischen Seiten zu navigieren, ohne die gesamte Seite neu laden zu m\u00fcssen. Dies wird \u00fcber die Komponente Wenn du auf einen Inertia-Link klickst, f\u00e4ngt Inertia den Klick ab und leitet dich stattdessen zu XHR weiter. Der Browser l\u00e4dt die Seite auf diese Weise nicht neu und bietet dem Nutzer ein vollst\u00e4ndiges Single-Page-Erlebnis.<\/p>\n Um Inertia und seine Integration in Laravel zu verstehen, werden wir eine Blog-Web-App namens Kinsta Blog<\/strong> erstellen und dabei die m\u00e4chtigste Kombination verwenden: Laravel f\u00fcr das Backend, Vue.js f\u00fcr das JavaScript-Frontend und Tailwind CSS f\u00fcr das Styling.<\/p>\n Wenn du dieses Tutorial lieber in einer lokalen Umgebung verfolgen m\u00f6chtest, kannst du DevKinsta<\/a> verwenden, ein leistungsstarkes Tool f\u00fcr Entwickler, Designer und Agenturen, mit dem du ein- und mehrseitige WordPress-Webanwendungen erstellen kannst. Gl\u00fccklicherweise l\u00e4sst sich WordPress mit dem Corcel-Paket<\/a> leicht in Laravel integrieren.<\/p>\n Um diese Tutorial optimal nutzen zu k\u00f6nnen, solltest du mit Folgendem vertraut sein:<\/p>\n Wenn du dir unsicher bist, schau dir diese fantastischen kostenlosen und kostenpflichtigen Laravel-Tutorials<\/a> an. Ansonsten lass uns loslegen.<\/p>\n Damit du dich auf Inertia.js konzentrieren kannst und der Spa\u00dffaktor nicht zu kurz kommt, solltest du die folgenden Einstellungen bereithalten:<\/p>\n „\/resources\/views\/show.blade.php<\/strong>„:<\/p>\n „database\/migrations\/create_articles_table.php<\/strong>„:<\/p>\n „datenbank\/factories\/ArticleFactory.php<\/strong>„:<\/p>\n Das ist alles, was wir brauchen, um loszulegen! Jetzt k\u00f6nnen wir zur Sache kommen und Inertia.js in unser Projekt einf\u00fchren.<\/p>\n Der Installationsprozess von Inertia ist in zwei Hauptphasen unterteilt: serverseitig (Laravel) und clientseitig (VueJs).<\/p>\n Die offizielle Installationsanleitung in der Inertia-Dokumentation ist ein wenig veraltet, weil Laravel 9 jetzt standardm\u00e4\u00dfig Vite verwendet<\/a>, aber auch das werden wir durchgehen.<\/p>\n Als Erstes m\u00fcssen wir die serverseitigen Adapter von Inertia mit dem folgenden Terminalbefehl \u00fcber Composer installieren.<\/p>\n Jetzt richten wir unser Root-Template ein. Das ist eine einzelne Blade-Datei, die zum Laden deiner CSS- und JS-Dateien verwendet wird, sowie ein Inertia-Root, das zum Starten unserer JavaScript-Anwendung verwendet wird.<\/p>\n Da wir die neueste Version von Laravel 9 v9.3.1 verwenden, m\u00fcssen wir auch Vite aktivieren, indem wir es in unsere Tags in \/resources\/views\/app.blade.php<\/strong> aufnehmen:<\/p>\n Beachte, wie wir den Projekttitel dynamisch abrufen k\u00f6nnen, indem wir das Attribut Au\u00dferdem haben wir die Direktive Als N\u00e4chstes erstellen wir die Middleware HandleInertiaRequests<\/strong> und ver\u00f6ffentlichen sie in unserem Projekt. Dazu rufen wir den folgenden Terminalbefehl im Stammverzeichnis unseres Projekts auf:<\/p>\n Sobald dies abgeschlossen ist, gehst du zu „App\/Http\/Kernel.php<\/strong>“ und registrierst Als N\u00e4chstes m\u00fcssen wir unsere Vue.js 3-Abh\u00e4ngigkeiten f\u00fcr das Frontend auf die gleiche Weise installieren wie auf der Serverseite:<\/p>\n Als N\u00e4chstes musst du Vue.js 3 einbinden:<\/p>\n Aktualisiere dann deine prim\u00e4re JavaScript-Datei, um Inertia.js mit Vue.js 3, Vite und Laravel zu initialisieren:<\/p>\n „resources\/js\/app.js<\/strong>„:<\/p>\n Im obigen Codeschnipsel verwenden wir das Laravel-Plugin Jetzt m\u00fcssen wir nur noch Und die Datei vite.config.js<\/strong> aktualisieren:<\/p>\n Der letzte Schritt besteht darin, unsere Abh\u00e4ngigkeiten zu installieren und unsere Dateien zu kompilieren:<\/p>\n Und voil\u00e0! Du hast jetzt eine funktionierende Laravel 9 Anwendung mit Vue.js 3 und Vite. Jetzt m\u00fcssen wir nur noch sehen, was in Aktion passiert!<\/p>\n Erinnerst du dich an die beiden Blade-Dateien (index<\/strong> und show<\/strong>) f\u00fcr die Anzeige unserer Homepage und eines einzelnen Artikels?<\/p>\n Die einzige Blade-Datei, die wir bei der Verwendung von Inertia brauchen, ist app.blade.php<\/strong>, die wir schon einmal bei der Installation von Inertia verwendet haben. Was passiert jetzt mit diesen Dateien?<\/p>\n Wir werden diese Dateien von Blade-Komponenten in Inertia.js-Komponenten umwandeln.<\/p>\n Jede Seite in deiner Anwendung hat ihren eigenen Controller und ihre eigene JavaScript-Komponente mit Inertia. So kannst du nur die Daten abrufen, die f\u00fcr die jeweilige Seite ben\u00f6tigt werden, ohne eine API zu verwenden. Inertia-Seiten sind nichts anderes als JavaScript-Komponenten, in unserem Fall sind es Vue.js-Komponenten. Sie haben nichts besonders Bemerkenswertes an sich. Wir werden also alle HTML-Inhalte zwischen Erstelle einen Ordner namens „Seiten“ und verschiebe deine Dateien dorthin. Wir werden also „index.blade.php<\/strong>“ und „show.blade.php<\/strong>“ in „.\/resources\/js\/Pages<\/strong>“ ablegen. Dann \u00e4ndern wir das Dateiformat in „.vue“ anstelle von „.blade.php“, wobei wir den ersten Buchstaben des Namens in Gro\u00dfbuchstaben schreiben und den Inhalt in eine Standard-Vue.js-Komponente verwandeln. Wir lassen die Tags „resources\/js\/Pages\/Index.vue<\/strong>„:<\/p>\n „resources\/js\/Seiten\/Show.vue<\/strong>„:<\/p>\n Da ist etwas, das mich wirklich st\u00f6rt! Wir kopieren und f\u00fcgen unsere Kopf- und Fu\u00dfzeile in jede Komponente ein, was keine gute Vorgehensweise ist. Lass uns ein Inertia-Basislayout erstellen, um unsere dauerhaften Komponenten zu speichern.<\/p>\n Erstelle einen Ordner namens „Layouts“ in „\/resources\/js<\/strong>“ und erstelle in diesem Ordner eine Datei namens „KinstaLayout.vue“. Diese Datei wird unsere Kopf- und Fu\u00dfzeile und die „resources\/js\/Layouts\/KinstaLayout.vue<\/strong>„:<\/p>\n Dann werden wir dieses neue Layout in unsere Seiten importieren und den gesamten HTML-Inhalt damit umh\u00fcllen. Unsere Komponenten sollten wie folgt aussehen:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Als Erstes verwenden wir die „ArticleFactory<\/strong>„-Datei, die wir aus unserem Tutorial kennen, und legen einige Artikel in unserer Datenbank an.<\/p>\n „database\/seeders\/databaseSeeder.php<\/strong>„:<\/p>\n Gib dann den folgenden Terminalbefehl ein, um deine Tabellen zu migrieren und die gef\u00e4lschten Daten aus den Fabriken zu seeden:<\/p>\n Dadurch werden 10 gef\u00e4lschte Artikel in der Datenbank erstellt, die wir mithilfe des Laravel-Routings an unsere View \u00fcbergeben m\u00fcssen. Da wir nun Inertia zum Rendern von Views verwenden, wird sich die Art und Weise, wie wir unsere Routen schreiben, leicht \u00e4ndern. Wir erstellen unsere erste Laravel-Inertia-Route in „routes\/web.php<\/strong>“ und geben die Homepage-Ansicht aus „\/resources\/js\/Pages\/Index.vue<\/strong>“ zur\u00fcck.<\/p>\n „routes\/web.php<\/strong>„:<\/p>\n Beachte, dass wir Gehe zur Indexdatei und setze die abgerufenen Daten als Prop und f\u00fchre mit „resources\/js\/Pages\/Index.vue<\/strong>„:<\/p>\n Beachte, dass es ausreicht, ihn nur als Prop zu definieren, ohne ihn zur\u00fcckzugeben, weil wir das Lass uns die Schleife erstellen:<\/p>\n Jetzt verwenden wir die Vue DevTools-Erweiterung von Google Chrome<\/a>, mit der wir meine Anwendung debuggen k\u00f6nnen. Wir wollen dir zeigen, wie unsere Daten an die Komponente \u00fcbergeben werden.<\/p>\n „Articles“ wird der Komponente als prop-Objekt \u00fcbergeben, das ein Array von Artikeln enth\u00e4lt. Jeder Artikel im Array ist auch ein Objekt mit Eigenschaften, die den Daten entsprechen, die es aus der Datenbank bezogen hat. Das bedeutet, dass alle Daten, die wir von Laravel zu Inertia \u00fcbertragen, als Prop behandelt werden.<\/p>\n Da Tailwind bereits in unserem Projekt installiert ist, m\u00fcssen wir ihm nur noch sagen, dass es unsere Inertia-Komponenten lesen soll. Dazu m\u00fcssen wir die Datei „tailwind.config.js<\/strong>“ wie folgt bearbeiten:<\/p>\n Stelle dann sicher, dass wir unsere CSS-Datei in „resources\/js\/app.js<\/strong>“ importiert haben:<\/p>\n Jetzt sind wir bereit, unsere Komponenten zu gestalten.<\/p>\n „resources\/js\/Pages\/Index.vue<\/strong>„:<\/p>\n „resources\/js\/Layouts\/KinstaLayout.vue<\/strong>„:<\/p>\n Wenn du dir den Browser ansiehst, wirst du feststellen, dass Vite die Seite bereits mit der Tailwind-Magie aktualisiert hat.<\/p>\n Da wir nun eine funktionierende Homepage haben, die alle Artikel in der Datenbank anzeigen kann, m\u00fcssen wir eine weitere Route erstellen, um einzelne Artikel anzuzeigen. Erstellen wir eine neue Route und setzen wir die URL auf einen „id“-Platzhalter:<\/p>\n „routes\/web.php<\/strong>“<\/p>\n Wir haben das Modell „Artikel“ importiert und eine neue Route hinzugef\u00fcgt, die die Show.vue<\/strong> Inertia-Komponente zur\u00fcckgibt. Au\u00dferdem haben wir die Laravel-Routenmodellbindung<\/a> genutzt, mit der Laravel automatisch den Artikel abrufen kann, auf den wir uns beziehen.<\/p>\n Jetzt brauchen wir nur noch eine M\u00f6glichkeit, diese Route zu besuchen, indem wir auf einen Link auf der Homepage klicken, ohne die gesamte Seite neu laden zu m\u00fcssen. Das ist mit dem magischen Tool von Inertia In unserer Index.vue importieren wir Lass uns Show.vue<\/strong> mit Tailwind stylen, damit es ein bisschen schicker aussieht und f\u00fcr unseren Besuch bereit ist. Au\u00dferdem m\u00fcssen wir dem Programm mitteilen, dass es ein „Artikel“-Objekt erwarten und es als Requisite setzen soll:<\/p>\n Wenn wir nun auf den Artikeltitel oder „Weiterlesen“ klicken, werden wir auf magische Weise zu Show.vue<\/strong> transportiert, ohne dass die Seite aktualisiert werden muss.<\/p>\n In unserem Fall verwenden wir „routes\/web.php<\/strong>„:<\/p>\n Wir haben jetzt eine funktionierende SPA mit Laravel, Inertia und Tailwind CSS gebaut. Aber mit Inertia k\u00f6nnen wir noch viel mehr erreichen. Es ist an der Zeit, sich einige Inertia-Techniken anzueignen, die sowohl den Entwicklern als auch den Besuchern der Anwendung helfen werden.<\/p>\n Du hast vielleicht bemerkt, dass wir unseren Laravel-Routen Namen hinzugef\u00fcgt haben, ohne sie zu benutzen. Mit Inertia k\u00f6nnen wir unsere benannten Routen in unseren Komponenten verwenden, anstatt die vollst\u00e4ndige Route manuell aufzuschreiben.<\/p>\n Wir k\u00f6nnen dies erreichen, indem wir das Ziggy-Paket in unserem Projekt installieren<\/a>:<\/p>\n Gehe dann zu „resources\/js\/app.js“ und aktualisiere es wie folgt:<\/p>\n Gehe zu „\/resources\/views\/app.blade.php<\/strong>“ und aktualisiere den head mit der Direktive …und aktualisiere deine NPM-Pakete, indem du die beiden folgenden Terminalbefehle ausf\u00fchrst:<\/p>\n Mit diesem Paket k\u00f6nnen wir benannte Routen in unseren Inertia-Komponenten verwenden. Also gehen wir zu Index.vue<\/strong> und entfernen die alte manuelle Route und ersetzen sie durch den Routennamen, w\u00e4hrend wir die Daten ganz normal wie in unserem Controller \u00fcbergeben.<\/p>\n Wir werden dies ersetzen:<\/p>\n …durch dies:<\/p>\n Damit erhalten wir genau das gleiche Verhalten wie vorher, aber es ist entwicklerfreundlicher und extrem hilfreich, wenn deine Route viele Parameter erwartet.<\/p>\n Dies ist eine der sch\u00f6nsten Funktionen von Inertia.js. Da SPA ein interaktives Nutzererlebnis bietet, w\u00e4re eine st\u00e4ndige R\u00fcckmeldung, ob eine Anfrage geladen wird, eine fantastische Erg\u00e4nzung der Anwendung. Dies kann durch eine separate Bibliothek erreicht werden, die Inertia anbietet.<\/p>\n Die Bibliothek „@inertiajs\/progress“ ist ein Wrapper um NProgress<\/a>, der die Ladeanzeigen abh\u00e4ngig von Inertia-Ereignissen anzeigt. Du musst nicht wirklich wissen, wie das hinter den Kulissen funktioniert, also lass es uns einfach zum Laufen bringen.<\/p>\n Wir k\u00f6nnen diese Bibliothek mit dem folgenden Terminalbefehl installieren:<\/p>\n Sobald sie installiert ist, m\u00fcssen wir sie in „Warum Inertia?<\/h2>\n
Wie Inertia funktioniert<\/h2>\n
<Link><\/code> erreicht, die ein leichtgewichtiger Wrapper um ein Standard-Anker-Tag ist.<\/p>\nErste Schritte mit Inertia<\/h2>\n
![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Voraussetzungen<\/h3>\n
\n
Schritt 1: Installation der Kernelemente<\/h3>\n
\n
kinsta-blog<\/code><\/li>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <main>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<\/li>\nkinsta_blog<\/code> ist mit unserem Projekt verbunden: „.env<\/strong>„:\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=kinsta_blog\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n<\/li>\n
\n„app\/Models\/Article.php<\/strong>„:<\/p>\n<?php\n\nnamespace AppModels;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Article extends Model\n{\n use HasFactory;\n\n protected $fillable = ['title', 'excerpt', 'body'];\n}<\/code><\/pre>\n<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n\n public function up()\n {\n Schema::create('articles', function (Blueprint $table) {\n $table->id();\n $table->string('title');\n $table->text('excerpt');\n $table->text('body');\n $table->timestamps();\n });\n }\n\n public function down()\n {\n Schema::dropIfExists('articles');\n }\n};<\/code><\/pre>\n<?php\n\nnamespace DatabaseFactories;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\Factory;\n\nclass ArticleFactory extends Factory\n{\n\n public function definition()\n {\n return [\n 'title' => $this->faker->sentence(6),\n 'excerpt' => $this->faker->paragraph(4),\n 'body' => $this->faker->paragraph(15),\n ];\n }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\nSchritt 2: Inertia installieren<\/h3>\n
1. Serverseitig<\/h4>\n
composer require inertiajs\/inertia-laravel<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n \n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n \n @vite('resources\/js\/app.js') @inertiaHead\n <\/head>\n\n <body class=\"font-sans antialiased\">\n @inertia\n <\/body>\n<\/html><\/code><\/pre>\ninertia<\/code> zu den <title><\/code> Tags hinzuf\u00fcgen.<\/p>\n@vite<\/code> in den Head eingef\u00fcgt, um Vite den Pfad zu unserer JavaScript-Hauptdatei mitzuteilen, in der wir unsere App erstellt und unser CSS importiert haben. Vite ist ein Tool, das bei der JavaScript- und CSS-Entwicklung hilft, indem es Entwicklern erm\u00f6glicht, Frontend-\u00c4nderungen zu sehen, ohne die Seite w\u00e4hrend der lokalen Entwicklung aktualisieren zu m\u00fcssen.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> als letztes Element in deinen Web-Middlewares:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Clientseitig<\/h4>\n
npm install @inertiajs\/inertia @inertiajs\/inertia-vue3\n\/\/ or\nyarn add @inertiajs\/inertia @inertiajs\/inertia-vue3<\/code><\/pre>\nnpm install vue@next<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .mount(el);\n },\n});<\/code><\/pre>\nresolvePageComponent<\/code> und weisen es an, unsere Komponenten aus dem Verzeichnis .\/Pages\/$name.vue<\/strong> aufzul\u00f6sen. Der Grund daf\u00fcr ist, dass wir unsere Inertia-Komponenten sp\u00e4ter in unserem Projekt in diesem Verzeichnis speichern werden und das Plugin uns dabei helfen wird, diese Komponenten automatisch aus dem richtigen Verzeichnis zu laden.<\/p>\nvitejs\/plugin-vue<\/code> installieren:<\/p>\nnpm i @vitejs\/plugin-vue<\/code><\/pre>\nimport { defineConfig } from \"vite\";\nimport laravel from \"laravel-vite-plugin\";\nimport vue from \"@vitejs\/plugin-vue\";\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\"resources\/css\/app.css\", \"resources\/js\/app.js\"],\n refresh: true,\n }),\n vue({\n template: {\n transformAssetUrls: {\n base: null,\n includeAbsolute: false,\n },\n },\n }),\n ],\n});<\/code><\/pre>\nnpm install\n\nnpm run dev<\/code><\/pre>\nInertia-Seiten erstellen<\/h2>\n
<template><\/code> Tags einpacken und alles, was mit JavaScript zu tun hat, wird mit <script><\/code> Tags eingepackt.<\/p>\n<html><\/code>, <head><\/code> und <body><\/code> weg, da sie bereits in der Root-Blade-Komponente enthalten sind.<\/p>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Welcome to Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\nmain<\/code> mit einer <slot \/><\/code> enthalten, damit alle Komponenten, die mit diesem Layout verpackt sind, darin eingebettet werden k\u00f6nnen. Diese Datei sollte wie folgt aussehen:<\/p>\n<script setup><\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <slot \/>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <section>\n <h2>Read our latest articles<\/h2>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n <\/template><\/code><\/pre>\n<script setup>\n import KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nLaravel Routes und Inertia Rendering<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse AppModelsArticle;\nuse IlluminateDatabaseSeeder;\n\nclass DatabaseSeeder extends Seeder\n{\n public function run()\n {\n Article::factory(10)->create();\n }\n}<\/code><\/pre>\nphp artisan migrate:fresh --seed<\/code><\/pre>\n<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');<\/code><\/pre>\nInertia<\/code> importiert und nicht den view()<\/code> Laravel-Helper verwendet haben, um die Ansicht zur\u00fcckzugeben, sondern stattdessen Inertia::render<\/code>. Inertia sucht auch standardm\u00e4\u00dfig nach dem Dateinamen, den wir in unserer Route im Ordner Pages<\/strong> unter „resources\/js“ angegeben haben.<\/p>\nv-for<\/code> eine Schleife dar\u00fcber, um die Ergebnisse anzuzeigen. Definiere zwischen den Skript-Tags die \u00fcbergebenen Daten als Requisite. Inertia muss nur wissen, welche Art von Daten du erwartest. In unserem Fall ist es ein „articles“-Objekt, das ein Array von Artikeln enth\u00e4lt.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> Format f\u00fcr die Vue.js 3 Composition API verwenden. Wenn wir die Options-API verwenden w\u00fcrden, m\u00fcssten wir sie zur\u00fcckgeben.<\/p>\n<template>\n <KinstaLayout>\n <h2>Read our latest articles<\/h2>\n\n <section>\n \/\/ Looping over articles\n <article v-for=\"article in articles\":key=\"article.id\">\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>{{article.title}}<\/h3>\n <p>{{article.excerpt}}<\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nnpm run dev<\/code> (lass es laufen, weil wir Vite verwenden) und php artisan serve<\/code>, um den Laravel-Entwicklungsserver zu starten und auf unsere Website zuzugreifen, wir sehen die erwartete Seite, die alle zehn Artikel in der Datenbank anzeigt.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Verwendung von Tailwind CSS mit Inertia.js<\/h2>\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n \".\/storage\/framework\/views\/*.php\",\n \".\/resources\/views\/**\/*.blade.php\",\n \".\/resources\/js\/**\/*.vue\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\nimport \"..\/css\/app.css\";<\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script>\n\n<template>\n <KinstaLayout>\n <h2 class=\"text-2xl font-bold py-10\">Read our latest articles<\/h2>\n\n <section class=\"space-y-5 border-b-2 pb-10\">\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <a href=\"#\">{{ article.title }}<\/a>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <a\n href=\"#\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more<\/a\n >\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup><\/script>\n\n<template>\n <header\n class=\"bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4\"\n >\n <h1 class=\"text-white font-bold text-4xl\">Kinsta Blog<\/h1>\n <\/header>\n\n <main class=\"container mx-auto text-center\">\n <slot \/>\n <\/main>\n\n <footer\n class=\"bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto\"\n >\n <h2 class=\"font-bold text-xl pb-5\">Join our Newsletter<\/h2>\n\n <input\n class=\"rounded-xl w-80 h-12 px-3 py-2 shadow-md\"\n type=\"email\"\n placeholder=\"Write your email..\"\n \/>\n <\/footer>\n<\/template><\/code><\/pre>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Inertia-Links<\/h2>\n
<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');\n\nRoute::get('\/posts\/{article:id}', function (Article $article) {\n return Inertia::render('Show', [\n 'article' => $article\n ]);\n})->name('article.show');<\/code><\/pre>\n<Link><\/code> m\u00f6glich. In der Einleitung haben wir bereits erw\u00e4hnt, dass Inertia <Link><\/code> als Wrapper f\u00fcr ein Standard-Anker-Tag <a><\/code> verwendet und dass dieser Wrapper daf\u00fcr gedacht ist, den Seitenbesuch so nahtlos wie m\u00f6glich zu gestalten. In Inertia kann sich das <Link><\/code> Tag als Anker-Tag verhalten, das <GET><\/code> Anfragen ausf\u00fchrt, aber es kann auch gleichzeitig als <button><\/code> und <form><\/code> fungieren. Schauen wir uns an, wie wir es in unserem Projekt anwenden k\u00f6nnen.<\/p>\n<Link><\/code> von Inertia und entfernen die Anker-Tags <a><\/code> und ersetzen sie durch Inertia-Tags <Link><\/code>. Das Attribut href<\/code> wird auf die URL der Route gesetzt, die wir zuvor f\u00fcr die Anzeige des Artikels erstellt haben:<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\nimport { Link } from \"@inertiajs\/inertia-vue3\";\n\ndefineProps({\n articles: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <section class=\"space-y-5 border-b-2 pb-10\">\n <h2 class=\"text-2xl font-bold pt-10 mx-auto text-center\">\n Read our latest articles\n <\/h2>\n\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div\n class=\"flex flex-col text-left justify-between pl-3 space-y-5\"\n >\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <Link :href=\"'\/posts\/' + article.id\">{{\n article.title\n }}<\/Link>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <Link\n :href=\"'\/posts\/' + article.id\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more\n <\/Link>\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\ndefineProps({\n article: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <article class=\"mx-auto mt-10 flex justify-center max-w-5xl border-b-2\">\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-80 h-80 rounded-xl mx-auto py-5\"\n alt=\"\"\n \/>\n <div class=\"text-left flex flex-col pt-5 pb-10 px-10\">\n <h1 class=\"text-xl font-semibold mb-10\">{{ article.title }}<\/h1>\n <p>{{ article.body }}<\/p>\n <\/div>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> als Anker-Tag, das eine GET<\/code> Anfrage an die Route sendet und die neuen Daten zur\u00fcckgibt, aber wir k\u00f6nnen <Link><\/code> auch f\u00fcr POST<\/code>, PUT<\/code>, PATCH<\/code> und DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel Inertia Tipps und Tricks, die du kennen solltest<\/h2>\n
URLs generieren<\/h3>\n
composer require tightenco\/ziggy<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\nimport { ZiggyVue } from \"..\/..\/vendor\/tightenco\/ziggy\/dist\/vue.m\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mount(el);\n },\n});<\/code><\/pre>\n@routes<\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n \n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n \n @routes\n @vite('resources\/js\/app.js')\n @inertiaHead\n<\/head>\n\n<body class=\"font-sans antialiased\">\n @inertia\n<\/body>\n\n<\/html><\/code><\/pre>\nnpm install && npm run dev<\/code><\/pre>\n<Link :href=\"'\/posts\/' + article.id\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\n<Link :href=\"route('article.show', article.id)\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\nFortschrittsindikatoren<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n