\n
Varf\u00f6r SPA?<\/h2>\n
Innan vi kan fr\u00e5ga oss varf\u00f6r vi ska anv\u00e4nda Inertia s\u00e5 m\u00e5ste vi fr\u00e5ga: ”Varf\u00f6r SPA?”<\/p>\n
Varf\u00f6r skulle n\u00e5gon f\u00f6redra klient-side renderade applikationer framf\u00f6r traditionella server-side applikationer? Vad kan f\u00e5 en fullstack Laravel-utvecklare att s\u00e4ga adj\u00f6 till blade-komponenter<\/a>?<\/p>\n Det korta svaret: f\u00f6r att snabbhet och responsivitet \u00e4r avg\u00f6rande f\u00f6r ett framg\u00e5ngsrikt anv\u00e4ndarbeteende.<\/p>\n N\u00e4r det g\u00e4ller MPA: er s\u00e5 skickar webbl\u00e4saren st\u00e4ndigt f\u00f6rfr\u00e5gningar till backend, som sedan utf\u00f6r m\u00e5nga databasfr\u00e5gor. Efter att databasen och servern har bearbetat f\u00f6rfr\u00e5gningarna och levererat dem till webbl\u00e4saren, renderas sidan.<\/p>\n Men SPA fungerar annorlunda. Applikationen tar med sig allt som anv\u00e4ndaren beh\u00f6ver direkt till sidan, vilket g\u00f6r att webbl\u00e4saren inte beh\u00f6ver skicka fr\u00e5gor eller ladda om sidan f\u00f6r att \u00e5terge nya HTML-element.<\/p>\n Tack vare denna unika anv\u00e4ndarupplevelse s\u00e5 kr\u00e4ver m\u00e5nga stora f\u00f6retag att deras webbplatser ska bli ensidiga applikationer.<\/p>\n Med detta sagt s\u00e5 kan det vara sv\u00e5rt f\u00f6r Laravel-utvecklare att skapa en enkelsidesapplikation eftersom det skulle kr\u00e4va att de b\u00f6rjar anv\u00e4nda Vue.js eller React i st\u00e4llet f\u00f6r blade-mallar, vilket leder till att m\u00e5nga Laravel-juveler som sparar tid och arbete g\u00e5r f\u00f6rlorade.<\/p>\n Tack vare Inertia.js s\u00e5 har dock allt detta f\u00f6r\u00e4ndrats.<\/p>\n Om Laravel-utvecklare skulle bygga webb-SPA: er med Vue ist\u00e4llet f\u00f6r Inertia s\u00e5 skulle de beh\u00f6va konfigurera API: er och returnera JSON-data med Laravel och sedan anv\u00e4nda n\u00e5got som AXIOS f\u00f6r att h\u00e4mta data i Vue-komponenter. De skulle \u00e4ven beh\u00f6va n\u00e5got som Vue Router f\u00f6r att hantera rutter, vilket skulle inneb\u00e4ra att de skulle f\u00f6rlora Laravel-routning samt middlewares och kontrollerare.<\/p>\n Inertia.js g\u00f6r det \u00e5 andra sidan m\u00f6jligt f\u00f6r utvecklare att bygga moderna enkelsidiga Vue-, React- och Svelte-appar med hj\u00e4lp av klassisk server-side routing och kontrollerare. Inertia utformades f\u00f6r Laravel-, Ruby on Rails- och Django-utvecklare f\u00f6r att de skulle kunna bygga appar utan att \u00e4ndra sina kodningstekniker f\u00f6r att skapa styrenheter. De skulle \u00e4ven kunna h\u00e4mta data fr\u00e5n en databas och rendera vyer.<\/p>\n Tack vare Inertia.js s\u00e5 kommer Laravel-utvecklare att k\u00e4nna sig som hemma.<\/p>\n Att bygga SPA med endast Laravel och Vue ger dig en fullst\u00e4ndig JavaScript-sida f\u00f6r din frontend, men inte en enkelsidig app-upplevelse. Varje klickad l\u00e4nk kommer att f\u00e5 ditt ramverk p\u00e5 klientsidan att starta om vid n\u00e4sta sidladdning.<\/p>\n Det \u00e4r h\u00e4r som Inertia kommer in i bilden.<\/p>\n Inertia \u00e4r i princip ett routingbibliotek f\u00f6r klientsidan. Det g\u00f6r det m\u00f6jligt att navigera mellan sidor utan att det kr\u00e4vs en omladdning av hela sidan. Detta sker via komponenten N\u00e4r du klickar p\u00e5 en Inertia-l\u00e4nk s\u00e5 f\u00e5ngar Inertia upp klicket och omdirigerar dig till XHR i st\u00e4llet. Webbl\u00e4saren kommer inte att ladda om sidan, vilket ger anv\u00e4ndaren en fullst\u00e4ndig upplevelse av en enda sida.<\/p>\n F\u00f6r att f\u00f6rst\u00e5 Inertia och hur man integrerar det med Laravel s\u00e5 ska vi bygga en bloggwebbapplikation vid namn Kinsta Blog<\/strong> med hj\u00e4lp av den mest kraftfulla kombinationen. Vi ska nyttja Laravel f\u00f6r backend, Vue.js f\u00f6r JavaScript-frontend och Tailwind CSS f\u00f6r styling.<\/p>\n Om du f\u00f6redrar att f\u00f6lja den h\u00e4r handledningen i en lokal milj\u00f6 s\u00e5 kan du anv\u00e4nda DevKinsta<\/a>, ett kraftfullt verktyg f\u00f6r utvecklare, designers och agenturer som g\u00f6r det m\u00f6jligt f\u00f6r dem att konstruera WordPress-webbappar med en eller flera sidor. Lyckligtvis s\u00e5 kan WordPress enkelt integreras med Laravel med hj\u00e4lp av Corcel<\/a>-paketet.<\/p>\n F\u00f6r att f\u00e5 ut s\u00e5 mycket som m\u00f6jligt av den h\u00e4r handledningen s\u00e5 b\u00f6r du k\u00e4nna till f\u00f6ljande:<\/p>\n Om du k\u00e4nner dig os\u00e4ker s\u00e5 kan du kolla in dessa fantastiska kostnadsfria och betalda handledningarna om Laravel<\/a>. Annars s\u00e5 kan vi k\u00f6ra ig\u00e5ng.<\/p>\n F\u00f6r att fokusera p\u00e5 Inertia.js och komma till den roliga delen direkt, se till att du har f\u00f6ljande installation redo:<\/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 \u00e4r allt som vi beh\u00f6ver f\u00f6r att komma ig\u00e5ng! Nu ska vi komma till saken och introducera Inertia.js i v\u00e5rt projekt.<\/p>\n Installationsprocessen f\u00f6r Inertia \u00e4r uppdelad i tv\u00e5 huvudfaser: serversidan (Laravel) och klientsidan (VueJs).<\/p>\n Den officiella installationsguiden i Inertia-dokumentationen \u00e4r lite f\u00f6r\u00e5ldrad eftersom Laravel 9 nu anv\u00e4nder Vite<\/a> som standard, men vi kommer att g\u00e5 igenom \u00e4ven den.<\/p>\n Det f\u00f6rsta som vi beh\u00f6ver g\u00f6ra \u00e4r att installera Inertia server-side adapters med nedanst\u00e5ende terminalkommando via Composer.<\/p>\n Nu st\u00e4ller vi in v\u00e5r rotmall, som kommer att vara en enda blade-fil. Den kommer att anv\u00e4ndas f\u00f6r att ladda dina CSS- och JS-filer, samt en Inertia-root som kommer att anv\u00e4ndas f\u00f6r att starta v\u00e5r JavaScript-applikation.<\/p>\n Eftersom vi anv\u00e4nder den senaste versionen Laravel 9 v9.3.1 s\u00e5 m\u00e5ste vi \u00e4ven l\u00e5ta Vite utf\u00f6ra sin magi genom att inkludera den i v\u00e5ra taggar i \/resources\/views\/app.blade.php<\/strong>:<\/p>\n L\u00e4gg m\u00e4rke till hur vi kan h\u00e4mta projekttiteln dynamiskt genom att l\u00e4gga till attributet Vi har \u00e4ven lagt till V\u00e5rt n\u00e4sta steg blir att skapa HandleInertiaRequests<\/strong>-middleware och publicera den i v\u00e5rt projekt. Vi kan g\u00f6ra detta genom att avfyra nedanst\u00e5ende terminalkommando i rotkatalogen f\u00f6r v\u00e5rt projekt:<\/p>\n N\u00e4r detta \u00e4r klart, g\u00e5 till ”App\/Http\/Kernel.php<\/strong>” och registrera D\u00e4refter s\u00e5 m\u00e5ste vi installera v\u00e5ra Vue.js 3-beroenden f\u00f6r frontend p\u00e5 samma s\u00e4tt som p\u00e5 serversidan:<\/p>\n Efter detta s\u00e5 m\u00e5ste du h\u00e4mta in Vue.js 3:<\/p>\n Uppdatera sedan din prim\u00e4ra JavaScript-fil f\u00f6r att initiera Inertia.js med Vue.js 3, Vite och Laravel:<\/p>\n ”resources\/js\/app.js<\/strong>”:<\/p>\n I ovanst\u00e5ende kodutdrag s\u00e5 anv\u00e4nder vi Laravel\u2019s plugin Allt som \u00e5terst\u00e5r \u00e4r att installera Och uppdatera vite.config.js<\/strong>-filen:<\/p>\n Det sista steget \u00e4r att installera v\u00e5ra beroenden och kompilera v\u00e5ra filer:<\/p>\n Och voil\u00e0! Du har en fungerande Laravel 9-applikation med Vue.js 3 och Vite. Nu beh\u00f6ver vi se vad som h\u00e4nder i praktiken!<\/p>\n Minns du de d\u00e4r tv\u00e5 blade-filerna (index<\/strong> och show<\/strong>) f\u00f6r att visa v\u00e5r hemsida och en enskild artikel?<\/p>\n Den enda blade-filen som vi beh\u00f6ver n\u00e4r vi anv\u00e4nder Inertia \u00e4r app.blade.php<\/strong>, som vi anv\u00e4nde en g\u00e5ng redan n\u00e4r vi installerade Inertia. S\u00e5 vad h\u00e4nder med dessa filer nu?<\/p>\n Vi kommer att omvandla dessa filer fr\u00e5n blade-komponenter till Inertia.js-komponenter.<\/p>\n Varje sida i din applikation har sin egen kontrollerare och JavaScript-komponent med Inertia. P\u00e5 s\u00e5 s\u00e4tt s\u00e5 kan du bara f\u00e5 fram de data som kr\u00e4vs f\u00f6r den sidan, utan att anv\u00e4nda ett API. Inertia-sidor \u00e4r inget annat \u00e4n JavaScript-komponenter, i v\u00e5rt fall s\u00e5 \u00e4r det Vue.js-komponenter. Det \u00e4r inget anm\u00e4rkningsv\u00e4rt med dem. S\u00e5 vad vi kommer att g\u00f6ra \u00e4r att omsluta allt HTML-inneh\u00e5ll med\u00a0 Skapa en mapp som heter ”Pages” och flytta dina filer dit. S\u00e5 vi kommer att ha ”index.blade.php<\/strong>” och ”show.blade.php<\/strong>” i ”.\/resources\/js\/Pages<\/strong>”. Vi \u00e4ndrar sedan filformatet till ”.vue” i st\u00e4llet f\u00f6r ”.blade.php” och g\u00f6r den f\u00f6rsta bokstaven i namnen till versaler och f\u00f6rvandlar inneh\u00e5llet till en vanlig Vue.js-komponent. Vi kommer att utesluta taggarna ”resources\/js\/Pages\/Index.vue<\/strong>”:<\/p>\n ”resources\/js\/Pages\/Show.vue<\/strong>”:<\/p>\n Det \u00e4r n\u00e5got som verkligen st\u00f6r mig! Vi forts\u00e4tter att kopiera och klistra in v\u00e5rt sidhuvud och v\u00e5r sidfot i varje komponent, vilket inte \u00e4r n\u00e5gon bra metod. L\u00e5t oss skapa en Inertia Basic Layout f\u00f6r att lagra v\u00e5ra best\u00e4ndiga komponenter.<\/p>\n Skapa en mapp som heter ”Layouts” i ”\/resources\/js<\/strong>”. I den mappen s\u00e5 skapar du en fil som heter ”KinstaLayout.vue”. Den h\u00e4r filen kommer att ha v\u00e5r rubrik och sidfot och ”resources\/js\/Layouts\/KinstaLayout.vue<\/strong>”:<\/p>\n Vi ska sedan importera den nya layouten till v\u00e5ra sidor och linda in allt HTML-inneh\u00e5ll i den. V\u00e5ra komponenter ska se ut s\u00e5 h\u00e4r:<\/p>\n Index.vue<\/strong>:<\/p>\n Visa.vue<\/strong>:<\/p>\n L\u00e5t oss f\u00f6rst anv\u00e4nda filen ”ArticleFactory<\/strong>” som vi har fr\u00e5n startpunkten f\u00f6r v\u00e5r handledning och s\u00e4tta in n\u00e5gra artiklar i v\u00e5r databas.<\/p>\n ”database\/seeders\/databaseSeeder.php<\/strong>”:<\/p>\n Tryck sedan p\u00e5 nedanst\u00e5ende terminalkommando f\u00f6r att migrera dina tabeller och s\u00e5 de falska uppgifterna fr\u00e5n fabrikerna:<\/p>\n Detta kommer att skapa 10 falska artiklar i databasen, som vi kommer att beh\u00f6va skicka till v\u00e5r vy med hj\u00e4lp av Laravel-routing. Nu n\u00e4r vi anv\u00e4nder Inertia f\u00f6r att rendera vyer s\u00e5 kommer skrivs\u00e4ttet f\u00f6r v\u00e5ra rutter att f\u00f6r\u00e4ndras n\u00e5got. L\u00e5t oss skapa v\u00e5r f\u00f6rsta Laravel Inertia-rutt i ”routes\/web.php<\/strong>” och returnera hemsidevyn fr\u00e5n ”\/resources\/js\/Pages\/Index.vue<\/strong>”.<\/p>\n ”routes\/web.php<\/strong>”:<\/p>\n Observera att vi importerade G\u00e5 till Index-filen och st\u00e4ll in de h\u00e4mtade uppgifterna som en prop och loopa \u00f6ver dem med ”resources\/js\/Pages\/Index.vue<\/strong>”:<\/p>\n Observera att det r\u00e4cker att bara definiera det som en prop utan att returnera det eftersom vi anv\u00e4nder formatet L\u00e5t oss skapa slingan:<\/p>\n Vi ska nu anv\u00e4nda\u00a0Google Chrome’s Vue DevTools<\/a>-till\u00e4gg, vilket g\u00f6r att vi kan fels\u00f6ka min applikation. L\u00e5t oss visa hur v\u00e5ra data skickas till komponenten.<\/p>\n ”articles” skickas till komponenten som ett prop-objekt som inneh\u00e5ller en array av artiklar; varje artikel i arrayen \u00e4r ocks\u00e5 ett objekt med egenskaper som motsvarar de data som den har f\u00e5tt fr\u00e5n databasen. Detta inneb\u00e4r att alla data som vi \u00f6verf\u00f6r fr\u00e5n Laravel till Inertia kommer att behandlas som en prop.<\/p>\n Eftersom Tailwind redan \u00e4r installerat i v\u00e5rt projekt vid startpunkten \u00e4r allt vi beh\u00f6ver g\u00f6ra att s\u00e4ga \u00e5t det att l\u00e4sa v\u00e5ra Inertia-komponenter. Detta kan g\u00f6ras genom att redigera ”tailwind.config.js<\/strong>” enligt f\u00f6ljande:<\/p>\n Kontrollera sedan att vi har importerat v\u00e5r CSS-fil i ”resources\/js\/app.js<\/strong>”:<\/p>\n Nu \u00e4r vi redo att styla v\u00e5ra komponenter.<\/p>\n ”resources\/js\/Pages\/Index.vue<\/strong>”:<\/p>\n ”resources\/js\/Layouts\/KinstaLayout.vue<\/strong>”:<\/p>\n Om du tittar i webbl\u00e4saren ser du att Vite redan har uppdaterat sidan med Tailwind-magi.<\/p>\n Nu n\u00e4r vi har en fungerande hemsida som kan visa alla artiklar i databasen m\u00e5ste vi skapa en annan rutt f\u00f6r att visa enskilda artiklar. L\u00e5t oss skapa en ny rutt och st\u00e4lla in webbadressen till ett ”id”-wildcard:<\/p>\n ”routes\/web.php<\/strong>”<\/p>\n Vi importerade modellen ”Article” och lade till en ny rutt f\u00f6r att returnera Inertia-komponenten Show.vue<\/strong>. Vi utnyttjade \u00e4ven\u00a0Laravels route model binding<\/a>, vilket g\u00f6r att Laravel h\u00e4mtar den artikel som vi h\u00e4nvisar till automatiskt.<\/p>\n Allt som vi beh\u00f6ver nu \u00e4r ett s\u00e4tt att bes\u00f6ka denna rutt genom att klicka p\u00e5 en l\u00e4nk fr\u00e5n hemsidan utan att beh\u00f6va ladda om hela sidan. Detta \u00e4r m\u00f6jligt med Inertia\u2019s magiska verktyg I v\u00e5r Index.vue s\u00e5 kommer vi att importera Vi stylar Show.vue<\/strong> med Tailwind f\u00f6r att f\u00e5 den att se lite mer uppkl\u00e4dd ut och redo f\u00f6r v\u00e5rt bes\u00f6k. Och vi m\u00e5ste \u00e4ven l\u00e5ta den veta att den ska f\u00f6rv\u00e4nta sig ett ”Article”-objekt och st\u00e4lla in detta som en prop:<\/p>\n N\u00e4r vi nu klickar p\u00e5 artikelns titel eller p\u00e5 ”L\u00e4s mer” s\u00e5 kommer vi att transporteras till Show.vue<\/strong> utan att uppdatera sidan.<\/p>\n I v\u00e5rt fall s\u00e5 anv\u00e4nder vi Vi har nu en fungerande SPA som \u00e4r byggd med Laravel, Inertia och Tailwind CSS. Men inertia kan hj\u00e4lpa oss att uppn\u00e5 s\u00e5 mycket mer. Det \u00e4r dags att skaffa sig n\u00e5gra Inertia-tekniker som kommer att vara till hj\u00e4lp f\u00f6r b\u00e5de utvecklare och applikationsbes\u00f6kare.<\/p>\n Du kanske har m\u00e4rkt att vi har lagt till namn till v\u00e5ra Laravel-rutter utan att anv\u00e4nda dem. Inertia l\u00e5ter oss anv\u00e4nda v\u00e5ra namngivna rutter i v\u00e5ra komponenter ist\u00e4llet f\u00f6r att skriva ner hela rutten manuellt.<\/p>\n Vi kan uppn\u00e5 detta genom att installera Ziggy-paketet<\/a> i v\u00e5rt projekt:<\/p>\n G\u00e5 sedan till ”resources\/js\/app.js” och uppdatera den s\u00e5 h\u00e4r:<\/p>\n G\u00e5 till ”\/resources\/views\/app.blade.php<\/strong>” och uppdatera sidhuvudet med …och uppdatera dina NPM-paket genom att trycka p\u00e5 nedanst\u00e5ende tv\u00e5 terminalkommandon:<\/p>\n Det h\u00e4r paketet g\u00f6r det m\u00f6jligt att anv\u00e4nda namngivna rutter i v\u00e5ra Inertia-komponenter, s\u00e5 l\u00e5t oss g\u00e5 till Index.vue<\/strong> och ta bort den gamla manuella rutten och ers\u00e4tta den med ruttnamnet samtidigt som vi skickar data normalt som om vi vore i v\u00e5r kontrollerare.<\/p>\n Vi kommer att ers\u00e4tta det h\u00e4r:<\/p>\n …med detta:<\/p>\n Detta ger oss exakt samma beteende som vi hade, men det \u00e4r mer utvecklarv\u00e4nligt och mycket anv\u00e4ndbart n\u00e4r din rutt f\u00f6rv\u00e4ntar sig m\u00e5nga parametrar.<\/p>\n Detta \u00e4r en av de trevligaste funktionerna i Inertia.js. Eftersom SPA ger en interaktiv anv\u00e4ndarupplevelse s\u00e5 skulle ett fantastiskt tillskott till applikationen vara att ha konstant feedback om huruvida en beg\u00e4ran h\u00e5ller p\u00e5 att laddas. Detta kan \u00e5stadkommas genom ett separat bibliotek som Inertia erbjuder.<\/p>\n Biblioteket ”@inertiajs\/progress” \u00e4r en omslagsform kring NProgress<\/a> som villkorligt visar laddningsindikatorerna enligt Inertia-h\u00e4ndelser. Du beh\u00f6ver egentligen inte veta hur detta fungerar bakom kulisserna, s\u00e5 l\u00e5t oss bara f\u00e5 det att fungera.<\/p>\n Vi kan installera det h\u00e4r biblioteket med nedanst\u00e5ende terminalkommando:<\/p>\n N\u00e4r det \u00e4r installerat s\u00e5 m\u00e5ste vi importera det i ”resources\/js\/app.js<\/strong>”<\/p>\nVarf\u00f6r Inertia?<\/h2>\n
Hur Inertia fungerar<\/h2>\n
<Link><\/code>, som \u00e4r en l\u00e4ttviktig omslagsform kring en standard ankartagg.<\/p>\nKomma ig\u00e5ng med Inertia<\/h2>\n
![\"En](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
F\u00f6ruts\u00e4ttningar<\/h3>\n
\n
Steg 1: Installera 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> ansluten till v\u00e5rt 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>\nSteg 2: Installera Inertia<\/h3>\n
1. Server-sidan<\/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> i <title><\/code> -taggarna.<\/p>\n@vite<\/code> -direktivet i sidhuvudet f\u00f6r att Vite ska f\u00e5 veta s\u00f6kv\u00e4gen till v\u00e5r JavaScript-huvudfil d\u00e4r vi skapade v\u00e5r app och importerade v\u00e5rt CSS. Vite \u00e4r ett verktyg som hj\u00e4lper till med JavaScript- och CSS-utveckling genom att l\u00e5ta utvecklare se \u00e4ndringar p\u00e5 frontend utan att beh\u00f6va uppdatera sidan under lokal utveckling.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> som den sista punkten i din webb- middleware:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Klientsidan<\/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>, och vi s\u00e4ger \u00e5t det att l\u00f6sa upp v\u00e5ra komponenter fr\u00e5n katalogen .\/Pages\/$name.vue<\/strong>. Detta beror p\u00e5 att vi kommer att spara v\u00e5ra Inertia-komponenter i den h\u00e4r katalogen senare i v\u00e5rt projekt, och detta plugin hj\u00e4lper oss att ladda dessa komponenter fr\u00e5n r\u00e4tt katalog automatiskt.<\/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>\nSkapa tr\u00f6ghetssidor<\/h2>\n
<template><\/code> -taggar och allt som har med JavaScript att g\u00f6ra kommer att omslutas med <script><\/code> -taggar.<\/p>\n<html><\/code>, <head><\/code> och <body><\/code> eftersom de redan ing\u00e5r i huvudroten f\u00f6r 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> f\u00f6r att till\u00e5ta att alla komponenter som \u00e4r f\u00f6rpackade med den h\u00e4r layouten b\u00e4ddas in i den. Filen ska se ut s\u00e5 h\u00e4r :<\/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 och Inertia Rendering<\/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> och inte anv\u00e4nde view()<\/code> Laravel-hj\u00e4lpen f\u00f6r att returnera vyn. Vi anv\u00e4nde ist\u00e4llet\u00a0Inertia::render<\/code>. Inertia kommer \u00e4ven som standard att leta efter filnamnet som vi n\u00e4mnde i v\u00e5r rutt i mappen Pages<\/strong> i ”resources\/js”.<\/p>\nv-for<\/code> f\u00f6r att visa resultaten. Mellan skripttaggarna s\u00e5 definierar du de \u00f6verf\u00f6rda uppgifterna som ett rekvisit. Allt Inertia beh\u00f6ver veta \u00e4r vilken typ av data som du f\u00f6rv\u00e4ntar dig, vilket i v\u00e5rt fall \u00e4r ett ”articles”-objekt som inkluderar en array av artiklar.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> f\u00f6r Vue.js 3 kompositions-API. Om vi anv\u00e4nder options API s\u00e5 skulle vi beh\u00f6va returnera detta.<\/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> (l\u00e5t den vara ig\u00e5ng eftersom vi anv\u00e4nder Vite) och php artisan serve<\/code> f\u00f6r att starta laravel-utvecklingsservern och komma \u00e5t v\u00e5r webbplats. Nu ser vi den f\u00f6rv\u00e4ntade sidan som visar alla tio artiklarna i databasen.<\/p>\n![\"Inspektion](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Anv\u00e4ndning av 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![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Tr\u00f6ghetsl\u00e4nkar<\/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\u00e4mnde i inledningen att Inertia anv\u00e4nder <Link><\/code> som en omslagsform f\u00f6r en vanlig ankartagg <a><\/code>, och att denna omslagsform \u00e4r t\u00e4nkt att g\u00f6ra sidbes\u00f6ken s\u00e5 smidiga som m\u00f6jligt. I Inertia s\u00e5 kan <Link><\/code> -taggen upptr\u00e4da som en ankartagg som utf\u00f6r <GET><\/code> -f\u00f6rfr\u00e5gningar, men den kan \u00e4ven fungera som <button><\/code> och <form><\/code> samtidigt. L\u00e5t oss se hur vi kan till\u00e4mpa detta i v\u00e5rt projekt.<\/p>\n<Link><\/code> fr\u00e5n Inertia och ta bort ankartaggarna <a><\/code> och ers\u00e4tta dem med Inertia <Link><\/code> -taggar. Attributet href<\/code> kommer att s\u00e4ttas till den webbadress f\u00f6r rutten som vi tidigare skapade f\u00f6r att visa artikeln:<\/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![\"Tr\u00f6ghetsl\u00e4nkar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> som en ankartagg som skickar en GET<\/code> -f\u00f6rfr\u00e5gan till rutten och returnerar de nya uppgifterna. Vi kan dock \u00e4ven anv\u00e4nda <Link><\/code> f\u00f6r att\u00a0POST<\/code>, PUT<\/code>, PATCH<\/code> och DELETE<\/code> ”routes\/web.php<\/strong>”:<\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel Inertia Tips och tricks som du b\u00f6r k\u00e4nna till<\/h2>\n
Generering av webbadresser<\/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>\nFramstegsindikatorer<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n