Hvorfor SPA?<\/h2>\n
F\u00f8r vi kan sp\u00f8rge, hvorfor vi skal bruge Inertia, skal vi f\u00f8rst sp\u00f8rge: “Hvorfor SPA?”<\/p>\n
Hvorfor skulle nogen foretr\u00e6kke klientside renderede applikationer frem for traditionelle server-side applikationer? Hvad ville tvinge en full-stack Laravel-udvikler til at sige farvel til bladkomponenter<\/a>?<\/p>\n Det korte svar: Fordi hastighed og responsivitet er afg\u00f8rende for ethvert succesfuldt brugerengagement.<\/p>\n I tilf\u00e6lde af MPA’er sender browseren konstant foresp\u00f8rgsler til backend’en, som derefter udf\u00f8rer adskillige databaseforesp\u00f8rgsler. N\u00e5r databasen og serveren har behandlet foresp\u00f8rgsler og leveret dem til browseren, bliver siden gengivet.<\/p>\n Men SPA’er er anderledes. Applikationen bringer alt det, brugeren har brug for, direkte til siden, s\u00e5 browseren ikke beh\u00f8ver at sende foresp\u00f8rgsler eller genindl\u00e6se siden for at gengive nye HTML-elementer.<\/p>\n P\u00e5 grund af denne enest\u00e5ende brugeroplevelse kr\u00e6ver mange store virksomheder, at deres websteder bliver til single-page-applikationer.<\/p>\n N\u00e5r det er sagt, kan det v\u00e6re sv\u00e6rt for Laravel-udviklere at skabe en single-page-applikation, fordi det vil kr\u00e6ve, at de begynder at bruge Vue.js eller React i stedet for bladskabeloner, hvilket resulterer i tab af mange Laravel-perler, der sparer tid og kr\u00e6fter.<\/p>\n Men nu hvor vi har Inertia.js, er det hele \u00e6ndret.<\/p>\n Hvis Laravel-udviklere skulle bygge web SPA’er med Vue f\u00f8r Inertia, skulle de ops\u00e6tte API’er og returnere JSON-data med Laravel og derefter bruge noget som AXIOS til at hente dataene i Vue-komponenter. De ville ogs\u00e5 have brug for noget som Vue Router til at administrere ruter, hvilket ville betyde, at de ville miste Laravel-routing samt middlewares og controllere.<\/p>\n Inertia.js g\u00f8r det derimod muligt for udviklere at bygge moderne enkeltsidede Vue-, React- og Svelte-apps ved hj\u00e6lp af klassisk server-side-routing og controllere. Inertia blev designet til Laravel-, Ruby on Rails- og Django-udviklere for at give dem mulighed for at bygge apps uden at \u00e6ndre deres kodningsteknikker med oprettelse af controllere, hentning af data fra en database og rendering af visninger<\/p>\n Takket v\u00e6re Inertia.js vil Laravel-udviklere f\u00f8le sig hjemme.<\/p>\n Hvis du kun bygger SPA med Laravel og Vue, f\u00e5r du en fuld JavaScript-side til din frontend, men det giver dig ikke en single-page app-oplevelse. Hvert klikket link vil f\u00e5 dit klientside framework til at genstarte ved n\u00e6ste sideindl\u00e6sning.<\/p>\n Det er her, at Inertia kommer ind i billedet.<\/p>\n Inertia er grundl\u00e6ggende et routing-bibliotek p\u00e5 klientsiden. Det giver dig mulighed for at navigere mellem sider uden at skulle genindl\u00e6se hele siden. Dette opn\u00e5s via komponenten N\u00e5r du klikker p\u00e5 et Inertia-link, opfanger Inertia klikket og omdirigerer dig i stedet til XHR. Browseren vil ikke genindl\u00e6se siden p\u00e5 denne m\u00e5de, hvilket giver brugeren en fuld oplevelse med en enkelt side.<\/p>\n For at forst\u00e5 Inertia, og hvordan man integrerer det med Laravel, vil vi bygge en blog-webapp ved navn Kinsta Blog<\/strong> ved hj\u00e6lp af den mest kraftfulde kombination, Laravel til backend, Vue.js til JavaScript-frontend og Tailwind CSS til styling.<\/p>\n Hvis du foretr\u00e6kker at f\u00f8lge denne vejledning i et lokalt milj\u00f8, kan du bruge DevKinsta<\/a>, et kraftfuldt v\u00e6rkt\u00f8j til udviklere, designere og bureauer, der g\u00f8r det muligt for dem at konstruere WordPress-webapps med en enkelt og flere sider. Heldigvis kan WordPress nemt integreres med Laravel ved hj\u00e6lp af Corcel<\/a>-pakken.<\/p>\n For at f\u00e5 mest muligt ud af denne vejledning b\u00f8r du v\u00e6re bekendt med f\u00f8lgende:<\/p>\n Hvis du f\u00f8ler dig usikker, kan du tjekke disse fantastiske gratis og betalte Laravel-tutorials<\/a>. Ellers, s\u00e5 lad os springe ud i det.<\/p>\n For at fokusere p\u00e5 Inertia.js og komme til den sjove del med det samme, skal du sikre dig, at du har f\u00f8lgende ops\u00e6tning klar til at g\u00e5:<\/p>\n “\/resources\/views\/show.blade.php<\/strong>“:<\/p>\n “database\/migrations\/create_articles_table.php<\/strong>“:<\/p>\n “database\/factories\/ArticleFactory.php<\/strong>“:<\/p>\n Det er alt, hvad vi beh\u00f8ver for at komme i gang! Lad os nu komme til sagen og introducere Inertia.js til vores projekt.<\/p>\n Inertia installationsprocessen er opdelt i to hovedfaser: server-side (Laravel) og klientside (VueJs).<\/p>\n Den officielle installationsvejledning i Inertia-dokumentationen er lidt for\u00e6ldet, fordi Laravel 9 nu bruger Vite<\/a> som standard, men vi vil ogs\u00e5 gennemg\u00e5 dette.<\/p>\n Det f\u00f8rste vi skal g\u00f8re er at installere Inertia server-side adaptere med nedenst\u00e5ende terminalkommando via Composer.<\/p>\n Nu skal vi ops\u00e6tte vores rodskabelon, som vil v\u00e6re en enkelt bladfil, der vil blive brugt til at indl\u00e6se dine CSS- og JS-filer, samt en Inertia-root, der vil blive brugt til at starte vores JavaScript-applikation.<\/p>\n Fordi vi bruger den nyeste version Laravel 9 v9.3.1, skal vi ogs\u00e5 aktivere Vite til at arbejde sin magi ved at inkludere det i vores tags i \/resources\/views\/app.blade.php<\/strong>:<\/p>\n Bem\u00e6rk, hvordan vi er i stand til at hente projektets titel dynamisk ved at tilf\u00f8je Vi tilf\u00f8jede ogs\u00e5 Vores n\u00e6ste skridt bliver at oprette HandleInertiaRequests<\/strong> middleware og udgive den til vores projekt. Det kan vi g\u00f8re ved at affyre nedenst\u00e5ende terminalkommando i rodmappen for vores projekt:<\/p>\n N\u00e5r dette er f\u00e6rdigt, skal du g\u00e5 til “App\/Http\/Kernel.php<\/strong>” og registrere Dern\u00e6st skal vi installere vores Vue.js 3-afh\u00e6ngigheder p\u00e5 frontend-siden p\u00e5 samme m\u00e5de som p\u00e5 server-siden:<\/p>\n Dern\u00e6st skal du tr\u00e6kke Vue.js 3 ind:<\/p>\n Derefter skal du opdatere din prim\u00e6re JavaScript-fil for at initialisere Inertia.js med Vue.js 3, Vite og Laravel:<\/p>\n “resources\/js\/app.js<\/strong>“:<\/p>\n I ovenst\u00e5ende kodestykke bruger vi Laravels plugin Det eneste, der er tilbage, er at installere Og opdatere vite.config.js<\/strong>-filen:<\/p>\n Det sidste trin er at installere vores afh\u00e6ngigheder og kompilere vores filer:<\/p>\n Og voil\u00e0! Du har f\u00e5et dig en fungerende Laravel 9-applikation med Vue.js 3 og Vite. Nu skal vi se noget der sker i aktion!<\/p>\n Kan du huske de to blade-filer (index<\/strong> og show<\/strong>) til visning af vores hjemmeside og en enkelt artikel?<\/p>\n Den eneste blade-fil vi skal bruge, mens vi bruger Inertia, er app.blade.php<\/strong>, som vi allerede brugte en gang, da vi installerede Inertia. S\u00e5 hvad sker der med disse filer nu?<\/p>\n Vi vil omdanne disse filer fra blade-komponenter til Inertia.js-komponenter.<\/p>\n Hver side i din applikation har sin egen controller og JavaScript-komponent med Inertia. P\u00e5 den m\u00e5de kan du kun f\u00e5 de data, der er n\u00f8dvendige for den p\u00e5g\u00e6ldende side, uden at bruge en API. Inertia-sider er intet andet end JavaScript-komponenter, i vores tilf\u00e6lde er det Vue.js-komponenter. De har ikke noget s\u00e6rligt bem\u00e6rkelsesv\u00e6rdigt ved dem. S\u00e5 det vi vil g\u00f8re er at indpakke alt HTML-indhold mellem Opret en mappe kaldet “Pages” og flyt dine filer dertil. S\u00e5 vi vil have “index.blade.php<\/strong>” og “show.blade.php<\/strong>” i “.\/resources\/js\/Pages<\/strong>“. Derefter \u00e6ndrer vi filformatet til “.vue” i stedet for “.blade.php”, mens vi g\u00f8r det f\u00f8rste bogstav i deres navne til store bogstaver og g\u00f8r indholdet til en standard Vue.js-komponent. Vi udelukker “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Pages\/Show.vue<\/strong>“:<\/p>\n Der er noget, der virkelig generer mig! Vi bliver ved med at kopiere og inds\u00e6tte vores header og footer i hver komponent, hvilket ikke er en s\u00e6rlig god praksis. Lad os oprette et Inertia grundl\u00e6ggende Layout til at gemme vores vedvarende komponenter.<\/p>\n Opret en mappe kaldet “Layouts” i “\/resources\/js<\/strong>” og inden for denne mappe opretter du en fil med navnet “KinstaLayout.vue”. Denne fil vil have vores header og footer og “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Vi vil derefter importere dette nye layout i vores sider og pakke alt HTML-indholdet ind i det. Vores komponenter skal se s\u00e5ledes ud:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Lad os f\u00f8rst bruge “ArticleFactory<\/strong>“-filen, som vi har fra vores tutorial-startpunkt, og s\u00e5 nogle artikler i vores database.<\/p>\n “database\/seeders\/databaseSeeder.php<\/strong>“:<\/p>\n Derefter trykker du p\u00e5 nedenst\u00e5ende terminalkommando for at migrere dine tabeller og plante de falske data fra fabrikkerne:<\/p>\n Dette vil oprette 10 falske artikler i databasen, som vi skal sende til vores visning ved hj\u00e6lp af Laravel-routing. Nu hvor vi bruger Inertia til at rendere visninger, vil den m\u00e5de vi plejede at skrive vores routes p\u00e5 \u00e6ndre sig lidt. Lad os oprette vores f\u00f8rste Laravel Inertia-route i “routes\/web.php<\/strong>” og returnere forsidevisningen fra “\/resources\/js\/Pages\/Index.vue<\/strong>“.<\/p>\n “routes\/web.php<\/strong>“:<\/p>\n Bem\u00e6rk, at vi importerede G\u00e5 til Indeksfilen og indstil de hentede data som en prop og loop over dem med “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n Bem\u00e6rk, at det er nok kun at definere det som en prop uden at returnere det, fordi vi bruger Lad os lave en loop:<\/p>\n Nu bruger vi Google Chromes Vue DevTools<\/a>-udvidelse, som giver os mulighed for at debugge min applikation. Lad os vise dig, hvordan vores data bliver sendt til komponenten.<\/p>\n “articles” overf\u00f8res til komponenten som et prop-objekt, der indeholder et array af artikler; hver artikel i arrayet er ogs\u00e5 et object med egenskaber, der svarer til de data, den har erhvervet fra databasen. Det betyder, at alle data, som vi overf\u00f8rer fra Laravel til Inertia, vil blive behandlet som en prop.<\/p>\n Da Tailwind allerede er installeret i vores projekt i udgangspunktet, skal vi blot fort\u00e6lle det at l\u00e6se vores Inertia-komponenter. Dette kan g\u00f8res ved at redigere “tailwind.config.js<\/strong>” som f\u00f8lger:<\/p>\n S\u00f8rg derefter for, at vi har importeret vores CSS-fil i “resources\/js\/app.js<\/strong>“:<\/p>\n Og nu er vi klar til at style vores komponenter.<\/p>\n “resources\/js\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Hvis du kigger i browseren, vil du bem\u00e6rke, at Vite allerede har opdateret siden med Tailwind-magi.<\/p>\n Nu hvor vi har en fungerende hjemmeside, der kan vise alle artikler i databasen, skal vi oprette en anden rute til at vise de enkelte artikler. Lad os oprette en ny rute og indstille URL’en til et “id”-wildcard:<\/p>\n “routes\/web.php<\/strong>”<\/p>\n Vi importerede modellen “Article” og tilf\u00f8jede en ny rute for at returnere Show.vue<\/strong> Inertia-komponenten. Vi udnyttede ogs\u00e5 Laravels route-modelbinding<\/a>, som g\u00f8r det muligt for Laravel automatisk at hente den artikel, vi henviser til.<\/p>\n Nu mangler vi blot en m\u00e5de at bes\u00f8ge denne rute p\u00e5 ved at klikke p\u00e5 et link fra hjemmesiden uden at skulle genindl\u00e6se hele siden. Dette er muligt med Inertias magiske v\u00e6rkt\u00f8j I vores Index.vue vil vi importere Lad os style Show.vue<\/strong> med Tailwind for at f\u00e5 den til at se lidt mere p\u00e6nere ud og klar til vores bes\u00f8g. Og vi skal ogs\u00e5 lade den vide, at den skal forvente et “Artikel”-object og s\u00e6tte det som en prop:<\/p>\n N\u00e5r vi nu klikker p\u00e5 artiklens titel eller p\u00e5 “L\u00e6s mere”, vil vi p\u00e5 magisk vis blive transporteret til Show.vue<\/strong> uden at opdatere siden.<\/p>\n I vores tilf\u00e6lde bruger vi “routes\/web.php<\/strong>“:<\/p>\n Vi har nu en fungerende SPA bygget med Laravel, Inertia og Tailwind CSS. Men inertia kan hj\u00e6lpe os med at opn\u00e5 s\u00e5 meget mere. Det er tid til at tilegne sig nogle Inertia teknikker, der vil hj\u00e6lpe b\u00e5de udviklere og applikationsbes\u00f8gende.<\/p>\n Du har m\u00e5ske bem\u00e6rket, at vi har tilf\u00f8jet navne til vores Laravel routes uden at bruge det. Inertia giver os mulighed for at bruge vores navngivne routes i vores komponenter i stedet for manuelt at skrive den fulde route ned.<\/p>\n Vi kan opn\u00e5 dette ved at installere Ziggy-pakken<\/a> i vores projekt:<\/p>\n Derefter g\u00e5r vi til “resources\/js\/app.js” og opdaterer den p\u00e5 denne m\u00e5de:<\/p>\n G\u00e5 til “\/resources\/views\/app.blade.php<\/strong>“, og opdater head med …og opdater dine NPM-pakker ved at trykke p\u00e5 de to nedenst\u00e5ende terminalkommandoer:<\/p>\n Denne pakke giver os mulighed for at bruge navngivne ruter i vores Inertia-komponenter, s\u00e5 lad os g\u00e5 til Index.vue<\/strong> og fjerne den gamle manuelle rute og erstatte den med routenavnet, mens vi videregiver dataene normalt, som hvis vi var i vores controller.<\/p>\n Vi vil erstatte dette:<\/p>\n …med dette:<\/p>\n Dette giver os n\u00f8jagtig den samme opf\u00f8rsel, som vi havde, men det er mere udviklervenligt og yderst nyttigt, n\u00e5r din rute forventer mange parametre.<\/p>\n Dette er en af de fineste funktioner i Inertia.js; fordi SPA giver en interaktiv brugeroplevelse, ville det v\u00e6re en fantastisk tilf\u00f8jelse til applikationen at have konstant feedback om, hvorvidt en anmodning er ved at blive indl\u00e6st. Dette kan opn\u00e5s ved hj\u00e6lp af et separat bibliotek, som Inertia tilbyder.<\/p>\n Biblioteket “@inertiajs\/progress” er en wrapper omkring NProgress<\/a>, der betinget viser indl\u00e6sningsindikatorerne i henhold til Inertia-h\u00e6ndelser. Du beh\u00f8ver ikke rigtig at vide, hvordan dette fungerer bag kulisserne, s\u00e5 lad os bare f\u00e5 det til at virke.<\/p>\n Vi kan installere dette bibliotek med nedenst\u00e5ende terminalkommando:<\/p>\n N\u00e5r det er installeret, skal vi importere det i “Hvorfor Inertia?<\/h2>\n
S\u00e5dan fungerer Inertia<\/h2>\n
<Link><\/code>, som er en letv\u00e6gtsindpakning omkring et standard anchor-tag.<\/p>\nKom godt i gang med Inertia<\/h2>\n
![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Foruds\u00e6tninger<\/h3>\n
\n
Trin 1: Installer Core Elements<\/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> forbundet til vores projekt:”.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>\nTrin 2: Installer Inertia<\/h3>\n
1. Server-side<\/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> -attributten til <title><\/code> -tags.<\/p>\n@vite<\/code> -direktivet til head for at lade Vite kende stien til vores JavaScript-hovedfil, hvor vi oprettede vores app og importerede vores CSS. Vite er et v\u00e6rkt\u00f8j, der hj\u00e6lper med JavaScript- og CSS-udvikling ved at give udviklerne mulighed for at se frontend-\u00e6ndringer uden at skulle opdatere siden under lokal udvikling.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> som det sidste element i dine web middlewares:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Client-Side<\/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>, og vi fort\u00e6ller det, at det skal uploade vores komponenter fra mappen .\/Pages\/$name.vue<\/strong>. Dette skyldes, at vi senere i vores projekt vil gemme vores Inertia-komponenter i denne mappe, og dette plugin vil hj\u00e6lpe os med automatisk at indl\u00e6se disse komponenter fra den korrekte mappe.<\/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>\nOprettelse af inertiesider<\/h2>\n
<template><\/code> tags og alt relateret til JavaScript vil blive indpakket med <script><\/code> tags.<\/p>\n<html><\/code>, <head><\/code> og <body><\/code> -taggene, fordi de allerede er inkluderet i hovedroden blade-komponenten.<\/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> med en <slot \/><\/code> for at tillade alle komponenter, der er pakket med dette layout, at blive indlejret i det. Denne fil skal se s\u00e5ledes ud :<\/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 og 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> og ikke brugte view()<\/code> Laravel-hj\u00e6lperen til at returnere visningen, men i stedet brugte Inertia::render<\/code>. Inertia vil ogs\u00e5 som standard s\u00f8ge efter det filnavn, vi n\u00e6vnte i vores route i Pages<\/strong>-mappen i “resources\/js”.<\/p>\nv-for<\/code> for at vise resultaterne. Mellem scripttaggene defineres de overf\u00f8rte data som en prop. Det eneste Inertia skal vide er, hvilken type data du forventer, hvilket i vores tilf\u00e6lde er et “articles”-objekt, der indeholder et array af artikler.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> -formatet for Vue.js 3-kompositions-API. Hvis vi bruger options API, skal vi returnere det.<\/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> (lad den k\u00f8re, fordi vi bruger Vite) og php artisan serve<\/code> for at starte laravel-udviklingsserveren og f\u00e5 adgang til vores websted, vil vi se den forventede side, der viser alle ti artikler i databasen.<\/p>\n![\"Chromes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Brug af Tailwind CSS med 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![\"Et](\"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>. Vi n\u00e6vnte i indledningen, at Inertia bruger <Link><\/code> som en wrapper for et standard anchortag <a><\/code>, og at denne wrapper er beregnet til at g\u00f8re sidebes\u00f8g s\u00e5 problemfri som muligt. I Inertia kan <Link><\/code> -tagget opf\u00f8re sig som et anchortag, der udf\u00f8rer <GET><\/code> -foresp\u00f8rgsler, men det kan ogs\u00e5 fungere som <button><\/code> og <form><\/code> p\u00e5 samme tid. Lad os se, hvordan vi kan anvende det p\u00e5 vores projekt.<\/p>\n<Link><\/code> fra Inertia og fjerne ankertagget <a><\/code> og erstatte det med Inertia <Link><\/code> -tags. Attributten href<\/code> vil blive sat til den rute-URL, som vi tidligere har lavet til visning af artiklen:<\/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![\"Eksempelsiden](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> som et anchor tag, der sender en GET<\/code> -foresp\u00f8rgsel til ruten og returnerer de nye data tilbage, men vi kan bruge <Link><\/code> til ogs\u00e5 POST<\/code>, PUT<\/code>, PATCH<\/code> og DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel Inertia Tips og tricks du b\u00f8r kende<\/h2>\n
Generering af URL’er<\/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>-direktivet:<\/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>\nFremskridtsindikatorer<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n