Waarom SPA?<\/h2>\n
Voordat we ons kunnen afvragen waarom we Inertia moeten gebruiken, moeten we ons eerst \u00fcberhaupt afvragen: “Waarom SPA?”<\/p>\n
Waarom zou iemand een clientside gerenderde single-page applicatie verkiezen boven traditionele serverside applicaties? Wat zou een full-stack Laravel developer kunnen overhalen om afscheid te nemen van blade componenten<\/a>?<\/p>\n Het korte antwoord: omdat snelheid en reactiesnelheid essentieel zijn voor elke succesvolle gebruikersbetrokkenheid.<\/p>\n In het geval van MPA’s stuurt de browser voortdurend verzoeken naar de backend, die vervolgens talloze databasequeries uitvoert. Nadat de database en de server de queries hebben verwerkt en aan de browser hebben geleverd, wordt de pagina gerenderd.<\/p>\n Maar SPA’s zijn anders. De applicatie brengt alles wat de gebruiker nodig heeft direct naar de pagina, zodat de browser geen queries hoeft te sturen of de pagina opnieuw hoeft te laden om nieuwe HTML elementen te renderen.<\/p>\n Vanwege deze unieke gebruikerservaring willen veel grote bedrijven dat hun websites single-page applicaties worden.<\/p>\n Dat gezegd hebbende, kan het maken van een single-page applicatie moeilijk zijn voor Laravel developers, omdat ze dan Vue.js of React moeten gaan gebruiken in plaats van blade templates, waardoor veel Laravel juweeltjes die tijd en moeite besparen verloren gaan.<\/p>\n Maar nu we Inertia.js hebben, is dat allemaal veranderd.<\/p>\n Als Laravel developers web SPA’s zouden bouwen met Vue v\u00f3\u00f3r het tijdperk van Inertia, dan moesten ze API’s opzetten en JSON gegevens retourneren met Laravel, en dan iets als AXIOS gebruiken om de gegevens op te halen in Vue componenten. Ze zouden ook iets als Vue Router nodig hebben om routes te beheren, wat zou betekenen dat ze Laravel routing zouden verliezen, evenals middlewares en controllers.<\/p>\n Met Inertia.js daarentegen kunnen developers moderne single-page Vue, React en Svelte apps bouwen met behulp van klassieke serverside routing en controllers. Inertia is ontworpen voor developers van Laravel, Ruby on Rails en Django, zodat ze apps kunnen bouwen zonder hun coderingstechnieken te veranderen: controllers maken, gegevens ophalen uit een database en views renderen<\/p>\n Dankzij Inertia.js zullen Laravel developers zich meteen thuis voelen.<\/p>\n Alleen SPA bouwen met Laravel en Vue geeft je een volledige JavaScript pagina voor je frontend, maar dit geeft je geen single-page appervaring. Elke aangeklikte link zorgt ervoor dat je clientside framework opnieuw opstart bij de volgende paginalading.<\/p>\n Dit is waar Inertia helpt.<\/p>\n Inertia is in feite een clientside routingbibliotheek. Hiermee kun je tussen pagina’s navigeren zonder de hele pagina opnieuw te hoeven laden. Dit gebeurt via het Als je op een Inertia link klikt, onderschept Inertia de klik en stuurt je in plaats daarvan door naar XHR. De browser zal de pagina op deze manier niet herladen, waardoor de gebruiker een volledige single-page ervaring krijgt.<\/p>\n Om Inertia te begrijpen en hoe het te integreren met Laravel, gaan we een blogwebapp bouwen genaamd Kinsta Blog<\/strong> met behulp van de meest krachtige combinatie, Laravel voor de backend, Vue.js voor de JavaScript frontend, en Tailwind CSS voor styling.<\/p>\n Als je deze tutorial liever in een lokale omgeving volgt, kun je DevKinsta<\/a> gebruiken, een krachtige tool voor developers, ontwerpers en webbureaus waarmee ze WordPress webapps met \u00e9\u00e9n en meerdere pagina’s kunnen bouwen. Gelukkig kan WordPress gemakkelijk worden ge\u00efntegreerd met Laravel met behulp van het Corcel<\/a> pakket.<\/p>\n Om het meeste uit deze tutorial te halen moet je bekend zijn met het volgende:<\/p>\n Als je je onzeker voelt, bekijk dan deze fantastische gratis en betaalde Laravel tutorials<\/a>. Laten we beginnen.<\/p>\n Om je te concentreren op Inertia.js en meteen naar het leuke gedeelte te gaan, moet je de volgende instellingen klaar hebben staan:<\/p>\n “\/resources\/views\/show.blade<\/strong>.php”:<\/p>\n \u201cdatabase\/migrations\/create_articles_table.php<\/strong>“:<\/p>\n \u201cdatabase\/factories\/ArticleFactory.php<\/strong>\u201c:<\/p>\n Dat is alles wat we nodig hebben om te beginnen! Laten we nu aan de slag gaan en Inertia.js introduceren in ons project.<\/p>\n Het installatieproces van Inertia is verdeeld in twee grote fasen: serverside (Laravel) en clientside (VueJs).<\/p>\n De offici\u00eble installatiehanleiding in de Inertia documentatie is een beetje verouderd omdat Laravel 9 nu standaard Vite<\/a> gebruikt, maar ook dat zullen we doornemen.<\/p>\n Het eerste wat we moeten doen is Inertia serverside adapters installeren met het onderstaande terminalcommando via Composer.<\/p>\n Nu gaan we ons roottemplate instellen, dat een enkel blade bestand zal zijn en gebruikt zal worden om je CSS en JS bestanden te laden, en ook een Inertia root die gebruikt zal worden om onze JavaScript applicatie te starten.<\/p>\n Omdat we de meest recente versie Laravel 9 v9.3.1 gebruiken, moeten we ook Vite in staat stellen zijn werk te doen door het op te nemen in onze tags in \/resources\/views\/app.blade.php<\/strong>:<\/p>\n Let op hoe we de projecttitel dynamisch kunnen ophalen door het We hebben ook de Onze volgende stap is het maken van HandleInertiaRequests<\/strong> middleware en het publiceren ervan naar ons project. Dat kunnen we doen door het onderstaande terminalcommando in de hoofdmap van ons project af te vuren:<\/p>\n Zodra dit voltooid is, ga je naar “App\/Http\/Kernel.php<\/strong>” en registreer je Vervolgens moeten we onze frontend Vue.js 3 dependencies op dezelfde manier installeren als aan de serverside:<\/p>\n Vervolgens moet je Vue.js 3 binnenhalen:<\/p>\n Werk dan je primaire JavaScript bestand bij om Inertia.js te initialiseren met Vue.js 3, Vite, en Laravel:<\/p>\n “resources\/js\/app.js<\/strong>“:<\/p>\n In het bovenstaande codefragment gebruiken we Laravel’s plugin Wat overblijft is de installatie van En het bestand vite.config.js<\/strong> bij te werken:<\/p>\n De laatste stap is het installeren van onze dependencies en het compileren van onze bestanden:<\/p>\n En voil\u00e0! Je hebt een werkende Laravel 9 applicatie met Vue.js 3 en Vite. Nu moeten we iets in actie zien!<\/p>\n Weet je nog die twee blade\u00a0 bestanden (index<\/strong> en show<\/strong>) voor het bekijken van onze homepage en een los artikel?<\/p>\n Het enige blade bestand dat we nodig hebben bij het gebruik van Inertia is app.blade.php<\/strong>, dat we al een keer gebruikt hebben bij de installatie van Inertia. Dus wat gebeurt er nu met die bestanden?<\/p>\n We transformeren die bestanden van blade componenten in Inertia.js componenten.<\/p>\n Elke pagina in je applicatie heeft zijn eigen controller en JavaScript component met Inertia. Zo kun je alleen de gegevens verkrijgen die voor die pagina nodig zijn, zonder een API te gebruiken. Inertia pagina’s zijn niets meer dan JavaScript componenten, in ons geval zijn het Vue.js componenten. Ze hebben niets bijzonders in zich. Dus wat we gaan doen is alle HTML content wrappen tussen Maak een map genaamd “Pages” en verplaats je bestanden daarheen. Dus hebben we “index.blade.php<\/strong>” en “show.blade.php<\/strong>” in “.\/resources\/js\/Pages<\/strong>“. Dan veranderen we het bestandsformat in “.vue” in plaats van “.blade.php”, waar we de eerste letter van hun namen hoofdletter maken en de content veranderen in een standaard Vue.js component. We sluiten de tags “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Pages\/Show.vue<\/strong>“:<\/p>\n Iets zit me dwars! We blijven onze header en footer kopi\u00ebren en plakken in elk component, wat niet goed is. Laten we een Inertia basic Layout maken om onze persistente componenten in op te slaan.<\/p>\n Maak een map genaamd “Layouts” in “\/resources\/js<\/strong>” en maak in die map een bestand genaamd “KinstaLayout.vue”. Dit bestand zal onze header en footer bevatten en de “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Dan gaan we deze nieuwe layout importeren in onze pagina’s en alle HTML content ermee wrappen. Onze componenten zouden er zo uit moeten zien:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Laten we eerst het “ArticleFactory<\/strong>” bestand gebruiken dat we hebben van ons tutorial startpunt en wat artikelen in onze database plaatsen.<\/p>\n “database\/seeders\/databaseSeeder.php<\/strong>“:<\/p>\n Druk nu op het onderstaande terminalcommando om je tabellen te migreren en de neppe gegevens van de factories te seeden:<\/p>\n Dit zal 10 neppe artikelen in de database aanmaken, die we aan onze view moeten doorgeven met behulp van Laravel routing. Nu we Inertia gebruiken om views te renderen, zal de manier waarop we vroeger onze routes schreven enigszins veranderen. Laten we onze eerste Laravel Inertia route maken in “routes\/web.php<\/strong>” en de homepage-weergave teruggeven vanuit “\/resources\/js\/Pages\/Index.vue<\/strong>“.<\/p>\n “routes\/web.php<\/strong>“:<\/p>\n Let op dat we Ga naar het Indexbestand en stel de opgehaalde gegevens in als een prop en loop erover met “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n Let op dat het voldoende is om het alleen als prop te defini\u00ebren zonder het terug te geven, omdat we het Laten we de loop maken:<\/p>\n Nu gebruiken we de extensie Vue DevTools van Google Chrome<\/a>, waarmee we mijn applicatie kunnen debuggen. Laten we eens zien hoe onze gegevens worden doorgegeven aan de component.<\/p>\n “articles” wordt aan de component doorgegeven als een prop object dat een array van artikelen bevat; elk artikel in de array is ook een object met properties die overeenkomen met de gegevens die het uit de database heeft verkregen. Dit betekent dat alle gegevens die we van Laravel naar Inertia overdragen, worden behandeld als een prop.<\/p>\n Omdat Tailwind bij aanvang al in ons project is ge\u00efnstalleerd, hoeven we het alleen maar te vertellen dat het onze Inertia componenten moet lezen. Dit kan worden bereikt door “tailwind.config.js<\/strong>” als volgt te bewerken:<\/p>\n Zorg er vervolgens voor dat we ons CSS bestand hebben ge\u00efmporteerd in “resources\/js\/app.js<\/strong>“:<\/p>\n En nu zijn we klaar om onze componenten te stylen.<\/p>\n “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Als je naar de browser kijkt, zie je dat Vite de pagina al heeft bijgewerkt met wat Tailwind magie.<\/p>\n Nu we een werkende homepage hebben die alle artikelen in de database kan weergeven, moeten we nog een route maken om individuele artikelen weer te geven. Laten we een nieuwe route maken en de URL instellen op een “id” wildcard:<\/p>\n “routes\/web.php<\/strong>”<\/p>\n We importeren het “Article” model en voegen een nieuwe route toe om de Show.vue<\/strong> Inertia component terug te geven. We maakten ook gebruik van Laravel’s route model binding<\/a>, waardoor Laravel automatisch het artikel krijgt waarnaar we verwijzen.<\/p>\n Alles wat we nu nodig hebben is een manier om deze route te bezoeken door op een link van de homepage te klikken zonder de hele pagina opnieuw te hoeven laden. Dit is mogelijk met Inertia’s magische tool In onze Index.vue zullen we Laten we Show.vue<\/strong> stylen met Tailwind om het er wat meer aangekleed en er mooi voor ons bezoek uit te laten zien. En ook moeten we het laten weten dat het een “Article” object moet verwachten en dat als prop instellen:<\/p>\n Als we nu op de titel van het artikel of op “Read more” klikken, worden we op magische wijze naar Show.vue<\/strong> getransporteerd zonder de pagina te verversen.<\/p>\n In ons geval gebruiken we “routes\/web.php<\/strong>“:<\/p>\n We hebben nu een werkende SPA gebouwd met Laravel, Inertia en Tailwind CSS. Maar Inertia kan ons helpen nog veel meer te bereiken. Het is tijd om ons enkele Inertia technieken eigen te maken die zowel de developers als de bezoekers van de applicatie zullen helpen.<\/p>\n Je hebt misschien gemerkt dat we namen hebben toegevoegd aan onze Laravel routes zonder die te gebruiken. Met Inertia kunnen we onze benoemde routes binnen onze componenten gebruiken in plaats van handmatig de volledige route op te schrijven.<\/p>\n We kunnen dit bereiken door het Ziggy pakket in ons project te installeren<\/a>:<\/p>\n Ga nu naar “resources\/js\/app.js” en werk het als volgt bij:<\/p>\n Ga naar “\/resources\/views\/app.blade.php<\/strong>” en werk de head bij met …en ververs je NPM pakketten door op de onderstaande twee terminalcommando’s te klikken:<\/p>\n Met dit pakket kunnen we routes met naam gebruiken binnen onze Inertia componenten, dus laten we naar Index.vue<\/strong> gaan en de oude handmatige route verwijderen en vervangen door de naam van de route, terwijl we de gegevens normaal doorgeven alsof we in onze controller zitten.<\/p>\n We zullen dit vervangen door:<\/p>\n …door dit:<\/p>\n Dit geeft ons precies hetzelfde gedrag dat we hadden, maar het is developervriendelijker en buitengewoon handig als je route veel parameters verwacht.<\/p>\n Dit is een van de leukste eigenschappen van Inertia.js; omdat SPA een interactieve gebruikerservaring biedt, zou het een fantastische toevoeging zijn om voortdurend feedback te hebben of een verzoek aan het laden is. Dit kan worden bereikt door een aparte bibliotheek die Inertia aanbiedt.<\/p>\n De “@inertiajs\/progress” bibliotheek is een wrapper rond NProgress<\/a> die conditioneel de laadindicatoren toont volgens Inertia events. Je hoeft niet echt te weten hoe dit achter de schermen werkt, dus laten we het gewoon aan de praat krijgen.<\/p>\n We kunnen deze bibliotheek installeren met het onderstaande terminal commando:<\/p>\n Als hij eenmaal ge\u00efnstalleerd is, moeten we hem importeren in “Waarom Inertia?<\/h2>\n
Zo werkt Inertia<\/h2>\n
<Link><\/code> component, dat een lichtgewicht wrapper is rond een standaard anchortag.<\/p>\nAan de slag met Inertia<\/h2>\n
![\"Een](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Voorwaarden<\/h3>\n
\n
Stap 1: Installeer de kernelementen<\/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> verbonden met ons project:”.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<?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>\nStap 2: Inertia installeren<\/h3>\n
1. Serverside<\/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> attribuut toe te voegen aan de <title><\/code> tags.<\/p>\n@vite<\/code> directive toegevoegd aan de head om Vite het pad te laten weten van ons JavaScript hoofdbestand waar we onze app hebben gemaakt en onze CSS hebben ge\u00efmporteerd. Vite is een tool dat helpt bij de ontwikkeling van JavaScript en CSS door developers in staat te stellen wijzigingen aan de frontend te bekijken zonder de pagina te hoeven verversen tijdens lokale ontwikkeling.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> als laatste item in je web middlewares:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Clientside<\/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>, en we vertellen het om onze componenten op te lossen vanuit de directory .\/Pages\/$name.vue<\/strong>. Dit is omdat we later in ons project onze Inertia componenten in deze map zullen opslaan, en deze plugin helpt ons bij het automatisch laden van die componenten uit de juiste map.<\/p>\nvitejs\/plugin-vue<\/code>:<\/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\u00a0pagina’s maken<\/h2>\n
<template><\/code> tags en alles wat met JavaScript te maken heeft wordt gewrapped met <script><\/code> tags.<\/p>\n<html><\/code>, <head><\/code>, en <body><\/code> uit, omdat die al zijn opgenomen in het hoofdcomponent van de blade.<\/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> met een <slot \/><\/code> zodat alle componenten die met deze layout zijn gewrapped erin kunnen worden ingesloten. Dit bestand moet er als volgt uitzien :<\/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 en Inertia Render<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse App\\Models\\Article;\nuse Illuminate\\Database\\Seeder;\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> hebben ge\u00efmporteerd en niet de Laravel helper view()<\/code> hebben gebruikt om de weergave terug te geven, maar in plaats daarvan Inertia::render<\/code>. Inertia zal ook standaard zoeken naar de bestandsnaam die we in onze route hebben genoemd in de map Pages<\/strong> bij “resources\/js”.<\/p>\nv-for<\/code> om de resultaten te tonen. Definieer tussen de scripttags de doorgegeven gegevens als een prop. Het enige wat Inertia moet weten is welk type gegevens je verwacht, wat in ons geval een ‘articles’ object is dat een array van artikelen bevat.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> format gebruiken voor Vue.js 3 composition API. Als we opties API gebruiken dan zouden we het moeten retourneren.<\/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> (laten lopen omdat we Vite gebruiken) en php artisan serve<\/code> de laravel ontwikkelingsserver starten en onze website openen, dan zien we de verwachte pagina die alle tien artikelen in de database weergeeft.<\/p>\n![\"Chrome's](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Tailwind CSS gebruiken met 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![\"Een](\"https:\/\/kinqsta.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>. We hebben in de inleiding vermeld dat Inertia <Link><\/code> gebruikt als wrapper voor een standaard anchortag <a><\/code>, en dat deze wrapper bedoeld is om paginabezoeken zo naadloos mogelijk te laten verlopen. In Inertia kan de <Link><\/code> tag zich gedragen als een anchortag die <GET><\/code> verzoeken uitvoert, maar hij kan ook tegelijkertijd fungeren als een <button><\/code> en een <form><\/code>. Laten we eens kijken hoe we dit in ons project kunnen toepassen.<\/p>\n<Link><\/code> van Inertia importeren, en de anchortags <a><\/code> verwijderen en vervangen door Inertia <Link><\/code> tags. Het href<\/code> attribuut wordt ingesteld op de route URL die we eerder maakten voor het bekijken van het artikel:<\/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![\"De](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> als anchortag die een GET<\/code> verzoek naar de route stuurt en de nieuwe gegevens terugstuurt, maar we kunnen <Link><\/code> gebruiken om ook POST<\/code>, PUT<\/code>, PATCH<\/code> en DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel Inertia tips en trucs die je moet weten<\/h2>\n
URL’s genereren<\/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> directive:<\/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>\nVoortgangsindicatoren<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n