\n
Perch\u00e9 una SPA?<\/h2>\n
Prima di chiederci perch\u00e9 dovremmo usare Inertia, dobbiamo prima chiederci: “Perch\u00e9 una SPA?”<\/p>\n
Perch\u00e9 qualcuno dovrebbe preferire le applicazioni renderizzate lato client alle tradizionali applicazioni lato server? Cosa spinge sviluppatrici e sviluppatori Laravel full-stack a dire addio ai componenti blade<\/a>?<\/p>\n La risposta \u00e8 breve: perch\u00e9 la velocit\u00e0 e la reattivit\u00e0 sono essenziali per il successo di un’applicazione.<\/p>\n Nel caso delle AMP, il browser invia costantemente richieste al backend, che esegue numerose query al database. Dopo che il database e il server elaborano le query e le trasmettono al browser, la pagina viene renderizzata.<\/p>\n Le SPA sono invece diverse. L’applicazione porta tutto ci\u00f2 di cui l’utente ha bisogno direttamente nella pagina, eliminando la necessit\u00e0 per il browser di inviare query o ricaricare la pagina per rendere nuovi elementi HTML.<\/p>\n Grazie a questa esperienza unica per l’utente, molte grandi aziende chiedono a gran voce che i loro siti web diventino applicazioni a pagina singola.<\/p>\n Detto questo, la creazione di un’applicazione a pagina singola pu\u00f2 essere difficile per chi sviluppa con Laravel perch\u00e9 richiederebbe l’utilizzo di Vue.js o React al posto dei template blade, con la conseguente perdita di molte gemme di Laravel che fanno risparmiare tempo e fatica.<\/p>\n Ora che abbiamo Inertia.js, per\u00f2, tutto cambia.<\/p>\n Se prima di Inertia gli sviluppatori Laravel costruivano web SPA con Vue, dovevano impostare API e restituire dati JSON con Laravel, quindi usare qualcosa come AXIOS per recuperare i dati nei componenti Vue. Avrebbero inoltre bisogno di qualcosa come Vue Router per gestire i percorsi, il che significherebbe perdere il routing di Laravel, cos\u00ec come i middleware e i controller.<\/p>\n Inertia.js, invece, permette di costruire moderne app a pagina singola in Vue, React e Svelte utilizzando il classico routing e i controller lato server. Inertia \u00e8 stato progettato per chi sviluppa con Laravel, Ruby on Rails e Django per consentire loro di creare applicazioni senza modificare le tecniche di programmazione che prevedono la creazione di controller, il recupero dei dati da un database e il rendering delle viste<\/p>\n Grazie a Inertia.js, sviluppatrici e sviluppatori Laravel si sentiranno a casa.<\/p>\n Costruire SPA solo con Laravel e Vue vi dar\u00e0 una pagina JavaScript completa per il frontend, ma non vi fornir\u00e0 un’esperienza di app a pagina singola. Ogni link cliccato causer\u00e0 il riavvio del framework lato client al successivo caricamento della pagina.<\/p>\n \u00c8 qui che entra in gioco Inertia.<\/p>\n Inertia \u00e8 fondamentalmente una libreria di routing lato client. Vi permette di navigare tra le pagine senza dover ricaricare l’intera pagina. Questo avviene tramite il componente Quando fate clic su un link, Inertia intercetta il clic e vi reindirizza a XHR. In questo modo il browser non ricaricher\u00e0 la pagina, offrendo all’utente un’esperienza completa di una sola pagina.<\/p>\n Per capire Inertia e come integrarlo con Laravel, costruiremo una web app per blog chiamata Kinsta Blog<\/strong> utilizzando la combinazione pi\u00f9 potente: Laravel per il backend, Vue.js per il frontend JavaScript e Tailwind CSS per lo styling.<\/p>\n Se preferite seguire questo tutorial in un ambiente locale, potete usare DevKinsta<\/a>, un potente strumento per developer, designer e agenzie che consente di creare applicazioni web WordPress a una o pi\u00f9 pagine. Fortunatamente, WordPress pu\u00f2 essere facilmente integrato con Laravel grazie al pacchetto Corcel<\/a>.<\/p>\n Per trarre il massimo da questo tutorial, sarebbe meglio avere:<\/p>\n Se non siete sicuri di avere tutti i requisiti, date un’occhiata a questi fantastici tutorial su Laravel gratuiti e a pagamento<\/a>. Ora iniziamo.<\/p>\n Per concentrarvi su Inertia.js e passare subito alla parte pi\u00f9 divertente, verificate di avere la seguente configurazione pronta per l’uso:<\/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 Questo \u00e8 tutto ci\u00f2 che ci serve per iniziare! Ora passiamo al sodo e introduciamo Inertia.js nel nostro progetto.<\/p>\n Il processo di installazione di Inertia si divide in due fasi principali: lato server (Laravel) e lato client (VueJs).<\/p>\n La guida ufficiale all’installazione contenuta nella documentazione di Inertia \u00e8 un po’ obsoleta perch\u00e9 Laravel 9 ora usa Vite<\/a> per impostazione predefinita, ma ci occuperemo anche di questo.<\/p>\n La prima cosa da fare \u00e8 installare gli adattatori lato server di Inertia con il seguente comando da terminale tramite Composer.<\/p>\n Ora configureremo il nostro modello di root, che sar\u00e0 un singolo file blade che verr\u00e0 utilizzato per caricare i file CSS e JS, oltre a una root Inertia che verr\u00e0 utilizzata per lanciare la nostra applicazione JavaScript.<\/p>\n Poich\u00e9 stiamo utilizzando la versione pi\u00f9 recente di Laravel 9 v9.3.1, dobbiamo anche consentire a Vite di fare la sua magia includendolo nei nostri tag in \/resources\/views\/app.blade.php<\/strong>:<\/p>\n Notate come siamo in grado di recuperare il titolo del progetto in modo dinamico aggiungendo l’attributo Abbiamo anche aggiunto la direttiva La nostra prossima mossa sar\u00e0 creare il middleware HandleInertiaRequests<\/strong> e pubblicarlo nel nostro progetto. Possiamo farlo lanciando il seguente comando da terminale nella directory principale del nostro progetto:<\/p>\n Una volta completata questa operazione, andate in “App\/Http\/Kernel.php<\/strong>” e registrate Successivamente, dobbiamo installare le dipendenze di Vue.js 3 per il frontend cos\u00ec come abbiamo fatto lato server:<\/p>\n Successivamente, dovrete inserire Vue.js 3:<\/p>\n Quindi aggiornate il vostro file JavaScript principale per inizializzare Inertia.js con Vue.js 3, Vite e Laravel:<\/p>\n “resources\/js\/app.js<\/strong>“:<\/p>\n Nel codice che abbiamo riportato sopra, usiamo il plugin di Laravel Non resta che installare E aggiornare il file vite.config.js<\/strong>:<\/p>\n Il passo finale consiste nell’installare le dipendenze e compilare i file:<\/p>\n E voil\u00e0! Avete ottenuto un’applicazione Laravel 9 funzionante con Vue.js 3 e Vite. Ora dobbiamo vedere qualcosa in azione!<\/p>\n Vi ricordate i due file blade (index<\/strong> e show<\/strong>) per visualizzare la nostra homepage e un singolo articolo?<\/p>\n L’unico file blade di cui avremo bisogno durante l’utilizzo di Inertia \u00e8 app.blade.php<\/strong>, che abbiamo gi\u00e0 usato una volta durante l’installazione di Inertia. Cosa succede ora a questi file?<\/p>\n Trasformeremo questi file da componenti blade a componenti Inertia.js.<\/p>\n Ogni pagina della vostra applicazione ha il suo controller e il suo componente JavaScript con Inertia. Questo vi permette di ottenere solo i dati necessari per quella pagina, senza usare un’API. Le pagine Inertia non sono altro che componenti JavaScript, nel nostro caso sono componenti Vue.js. Non hanno nulla di particolarmente degno di nota. Per questo motivo, avvolgeremo tutti i contenuti HTML tra i tag Create una cartella chiamata “Pages” e spostate l\u00ec i vostri file. Quindi avremo “index.blade.php<\/strong>” e “show.blade.php<\/strong>” in “.\/resources\/js\/Pages<\/strong>“. Poi modificheremo il formato del file in “.vue” invece di “.blade.php”, rendendo la prima lettera del nome maiuscola e trasformando il contenuto in un componente standard di Vue.js. Escluderemo i tag “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Pages\/Show.vue<\/strong>“:<\/p>\n C’\u00e8 qualcosa che ci preoccupa molto! Continuiamo a copiare e incollare l’intestazione e il footer in ogni componente, il che non \u00e8 una buona pratica. Creiamo un layout di base Inertia per memorizzare i nostri componenti persistenti.<\/p>\n Create una cartella chiamata “Layouts” in “\/resources\/js”<\/strong> e all’interno della cartella create un file chiamato “KinstaLayout.vue”. Questo file conterr\u00e0 la nostra intestazione e il footer e il sito “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Quindi importeremo questo nuovo layout nelle nostre pagine e avvolgeremo tutti i contenuti HTML con esso. I nostri componenti dovrebbero avere questo aspetto:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Per prima cosa usiamo il file “ArticleFactory<\/strong>” che abbiamo ottenuto come punto di partenza del nostro tutorial e inseriamo alcuni articoli nel nostro database.<\/p>\n “database\/seeders\/databaseSeeder.php<\/strong>“:<\/p>\n Quindi eseguite il seguente comando da terminale per migrare le vostre tabelle e seminare i dati simulati dalle factory:<\/p>\n In questo modo verranno creati 10 finti articoli nel database, che dovremo passare alla nostra vista utilizzando il routing di Laravel. Ora che usiamo Inertia per il rendering delle viste, il modo in cui scrivevamo i nostri percorsi cambier\u00e0 leggermente. Creiamo il nostro primo percorso Laravel Inertia in “routes\/web.php<\/strong>” e restituiamo la vista homepage da “\/resources\/js\/Pages\/Index.vue<\/strong>“.<\/p>\n “routes\/web.php<\/strong>“:<\/p>\n Abbiamo importato Andate al file Index, impostate i dati recuperati come prop e fate un ciclo su di essi con “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n Notate che \u00e8 sufficiente definirlo come oggetto senza restituirlo perch\u00e9 stiamo usando il formato Creiamo il loop:<\/p>\n Ora stiamo usando l’estensione Vue DevTools di Google Chrome<\/a>, che ci permette di eseguire il debug della nostra applicazione. Vediamo come vengono passati i dati al componente.<\/p>\n “articles” viene passato al componente come un oggetto prop contenente un array di articoli; ogni articolo dell’array \u00e8 anche un oggetto con propriet\u00e0 che corrispondono ai dati acquisiti dal database. Questo significa che tutti i dati che trasferiamo da Laravel a Inertia saranno trattati come oggetti prop.<\/p>\n Dal momento che Tailwind \u00e8 gi\u00e0 installato nel nostro progetto al punto di partenza, tutto ci\u00f2 che dobbiamo fare \u00e8 dirgli di leggere i nostri componenti Inertia. Questo pu\u00f2 essere fatto modificando “tailwind.config.js<\/strong>” come segue:<\/p>\n Verificate poi di aver importato il nostro file CSS in “resources\/js\/app.js<\/strong>“:<\/p>\n E ora siamo pronti a creare lo stile dei nostri componenti.<\/p>\n “resources\/js\/Pages\/Index.vue<\/strong>“:<\/p>\n “resources\/js\/Layouts\/KinstaLayout.vue<\/strong>“:<\/p>\n Se guardate il browser, noterete che Vite ha gi\u00e0 aggiornato la pagina con la magia di Tailwind.<\/p>\n Ora che abbiamo una homepage funzionante in grado di visualizzare tutti gli articoli del database, dobbiamo creare un altro percorso per visualizzare i singoli articoli. Creiamo un nuovo percorso e impostiamo l’URL con un carattere jolly “id”:<\/p>\n “routes\/web.php<\/strong>”<\/p>\n Abbiamo importato il modello “Articolo” e aggiunto una nuova rotta per restituire il componente Show.vue<\/strong> Inertia. Abbiamo anche sfruttato il binding del modello di percorso di Laravel<\/a>, che permette a Laravel di ottenere automaticamente l’articolo a cui ci riferiamo.<\/p>\n Ora abbiamo bisogno di un modo per visitare questo percorso cliccando su un link dalla homepage senza dover ricaricare l’intera pagina. Questo \u00e8 possibile grazie al magico strumento di Inertia Nel nostro Index.vue, importeremo Modifichiamo Show.vue<\/strong> con Tailwind per farlo apparire un po’ pi\u00f9 elegante e pronto per la nostra visita. Inoltre, dobbiamo fargli sapere che deve aspettarsi un oggetto “Article” e impostarlo come prop:<\/p>\n Ora, quando clicchiamo sul titolo dell’articolo o su “Read more”, verremo magicamente trasportati a Show.vue<\/strong> senza dover aggiornare la pagina.<\/p>\n Nel nostro caso, stiamo usando “routes\/web.php<\/strong>“:<\/p>\n Ora abbiamo una SPA funzionante costruita con Laravel, Inertia e Tailwind CSS. Ma Inertia pu\u00f2 aiutarci a ottenere molto altro. \u00c8 il momento di acquisire alcune tecniche di Inertia che aiuteranno sia chi sviluppa sia chi visita l’applicazione.<\/p>\n Avrete notato che abbiamo aggiunto nomi ai nostri percorsi Laravel senza usarli. Inertia ci permette di usare le nostre rotte con nome all’interno dei nostri componenti invece di scrivere manualmente il percorso completo.<\/p>\n Possiamo ottenere questo risultato installando il pacchetto Ziggy<\/a> nel nostro progetto:<\/p>\n Quindi andate su “resources\/js\/app.js” e aggiornatelo in questo modo:<\/p>\n Andate a “\/resources\/views\/app.blade.php<\/strong>” e aggiornate l’head con la direttiva …e aggiornate i pacchetti NPM con i due comandi da terminale che seguono:<\/p>\n Questo pacchetto ci permette di usare i percorsi con nome all’interno dei nostri componenti Inertia, quindi andiamo su Index.vue<\/strong> e rimuoviamo il vecchio percorso manuale sostituendolo con il nome del percorso e passando i dati normalmente, come se fossimo nel nostro controller.<\/p>\n Sostituiamo questo:<\/p>\n … con questo:<\/p>\n In questo modo otterremo lo stesso comportamento che avevamo prima, ma ora \u00e8 pi\u00f9 facile per chi sviluppa ed \u00e8 estremamente utile quando il percorso prevede molti parametri.<\/p>\n Questa \u00e8 una delle caratteristiche pi\u00f9 belle di Inertia.js; poich\u00e9 la SPA offre un’esperienza interattiva all’utente, avere un feedback costante sul caricamento di una richiesta sarebbe un’aggiunta fantastica all’applicazione. Questo pu\u00f2 essere realizzato con una libreria separata offerta da Inertia.<\/p>\n La libreria “@inertiajs\/progress” \u00e8 un wrapper attorno a NProgress<\/a> che mostra in modo condizionato gli indicatori di caricamento in base agli eventi di Inertia. Non \u00e8 necessario sapere come funziona dietro le quinte, quindi vediamo di farla funzionare.<\/p>\n Possiamo installare questa libreria con il seguente comando da terminale:<\/p>\n Una volta installata, dobbiamo importarla in “Perch\u00e9 Inertia?<\/h2>\n
Come Funziona Inertia<\/h2>\n
<Link><\/code>, che \u00e8 un involucro leggero attorno a un tag di ancoraggio standard.<\/p>\nCome Iniziare a Usare Inertia<\/h2>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Prerequisiti<\/h3>\n
\n
Passo 1: Installare gli Elementi Principali<\/h3>\n
\n
kinsta-blog<\/code><\/li>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n\t<meta charset=\"utf-8\" \/>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\t<title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n\t<header>\n \t<h1>Kinsta Blog<\/h1>\n\t<\/header>\n\n\t<main>\n \t<h2>Read our latest articles<\/h2>\n\n \t<section>\n \t<article>\n \t<div>\n \t<img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n \t<\/div>\n\n \t<h3>Title for the blog<\/h3>\n \t<p>\n \tLorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n \titaque error vel perferendis aliquam numquam dignissimos, expedita\n \tperspiciatis consectetur!\n \t<\/p>\n\n \t<a href=\"#\">Read more<\/a>\n \t<\/article>\n \t<\/section>\n\t<\/main>\n\n\t<footer>\n \t<h2>Join our Newsletter<\/h2>\n\n \t<input type=\"email\" \/>\n\t<\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n\t<meta charset=\"utf-8\" \/>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\t<title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n\t<main>\n \t<article>\n \t<div>\n \t<img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n \t<\/div>\n\n \t<h1>Title for the blog<\/h1>\n\n \t<p>Article content goes here<\/p>\n \t<\/article>\n\t<\/main>\n\n\t<footer>\n \t<h2>Join our Newsletter<\/h2>\n\n \t<input type=\"email\" \/>\n\t<\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<\/li>\nkinsta_blog<\/code> collegato al nostro progetto:”.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\tuse HasFactory;\n\n\tprotected $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\tpublic function up()\n\t{\n \tSchema::create('articles', function (Blueprint $table) {\n \t$table->id();\n \t$table->string('title');\n \t$table->text('excerpt');\n \t$table->text('body');\n \t$table->timestamps();\n \t});\n\t}\n\n\tpublic function down()\n\t{\n \tSchema::dropIfExists('articles');\n\t}\n};<\/code><\/pre>\n<?php\n\nnamespace DatabaseFactories;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\Factory;\n\nclass ArticleFactory extends Factory\n{\n\n\tpublic function definition()\n\t{\n \treturn [\n \t'title' => $this->faker->sentence(6),\n \t'excerpt' => $this->faker->paragraph(4),\n \t'body' => $this->faker->paragraph(15),\n \t];\n\t}\n}<\/code><\/pre>\n<\/li>\n<\/ol>\nPasso 2: Installare Inertia<\/h3>\n
1. Lato Server<\/h4>\n
composer require inertiajs\/inertia-laravel<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n\t<meta charset=\"utf-8\" \/>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\t\n\t<title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n\t\n\t@vite('resources\/js\/app.js') @inertiaHead\n <\/head>\n\n <body class=\"font-sans antialiased\">\n\t@inertia\n <\/body>\n<\/html><\/code><\/pre>\ninertia<\/code> ai tag <title><\/code>.<\/p>\n@vite<\/code> all’head per far conoscere a Vite il percorso del nostro file principale JavaScript in cui abbiamo creato la nostra applicazione e importato il nostro CSS. Vite \u00e8 uno strumento che aiuta lo sviluppo di JavaScript e CSS consentendo di visualizzare le modifiche del frontend senza dover aggiornare la pagina durante lo sviluppo locale.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> come ultimo elemento dei middleware web:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Lato Client<\/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\tresolvePageComponent(\n \t`.\/Pages\/${name}.vue`,\n \timport.meta.glob(\".\/Pages\/**\/*.vue\")\n\t),\n setup({ el, app, props, plugin }) {\n\treturn createApp({ render: () => h(app, props) })\n \t.use(plugin)\n \t.mount(el);\n },\n});<\/code><\/pre>\nresolvePageComponent<\/code> e gli diciamo di risolvere i nostri componenti dalla directory .\/Pages\/$name.vue<\/strong>. Questo perch\u00e9 salveremo i nostri componenti Inertia in questa directory pi\u00f9 avanti nel nostro progetto e il plugin ci aiuter\u00e0 a caricare automaticamente i componenti dalla directory corretta.<\/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\tlaravel({\n \tinput: [\"resources\/css\/app.css\", \"resources\/js\/app.js\"],\n \trefresh: true,\n\t}),\n\tvue({\n \ttemplate: {\n \ttransformAssetUrls: {\n \tbase: null,\n \tincludeAbsolute: false,\n \t},\n \t},\n\t}),\n ],\n});<\/code><\/pre>\nnpm install\n\nnpm run dev<\/code><\/pre>\nCreare Pagine con Inertia<\/h2>\n
<template><\/code> e tutto ci\u00f2 che riguarda JavaScript sar\u00e0 avvolto dai tag <script><\/code>.<\/p>\n<html><\/code>, <head><\/code> e <body><\/code> perch\u00e9 sono gi\u00e0 inclusi nel componente principale di blade.<\/p>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n\t<h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n\t<h2>Read our latest articles<\/h2>\n\n\t<section>\n \t<article>\n \t<div>\n \t<img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n \t<\/div>\n\n \t<h3>Title for the blog<\/h3>\n \t<p>\n \tLorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n \titaque error vel perferendis aliquam numquam dignissimos, expedita\n \tperspiciatis consectetur!\n \t<\/p>\n\n \t<a href=\"#\">Read more<\/a>\n \t<\/article>\n\t<\/section>\n <\/main>\n\n <footer>\n\t<h2>Join our Newsletter<\/h2>\n\n\t<input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n\t<h1>Welcome to Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n\t<article>\n \t<h1>Title for the blog<\/h1>\n\n \t<p>Article content goes here<\/p>\n\t<\/article>\n <\/main>\n\n <footer>\n\t<h2>Join our Newsletter<\/h2>\n\n\t<input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\nmain<\/code> con un <slot \/><\/code> per consentire a tutti i componenti che sono stati inseriti in questo layout di essere incorporati al suo interno. Questo file dovrebbe avere il seguente aspetto:<\/p>\n<script setup><\/script>\n\n<template>\n\t<header>\n\t<h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n \t<slot \/>\n <\/main>\n\n <footer>\n\t<h2>Join our Newsletter<\/h2>\n\n\t<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\t<section>\n \t<h2>Read our latest articles<\/h2>\n \t<article>\n \t<div>\n \t<img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n \t<\/div>\n\n \t<h3>Title for the blog<\/h3>\n \t<p>\n \tLorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n \titaque error vel perferendis aliquam numquam dignissimos, expedita\n \tperspiciatis consectetur!\n \t<\/p>\n\n \t<a href=\"#\">Read more<\/a>\n \t<\/article>\n\t<\/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\t<article>\n \t<h1>Title for the blog<\/h1>\n\n \t<p>Article content goes here<\/p>\n\t<\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nPercorsi Laravel e Render Inertia<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse App\\Models\\Article;\nuse Illuminate\\Database\\Seeder;\n\nclass DatabaseSeeder extends Seeder\n{\n\tpublic function run()\n\t{\n \tArticle::factory(10)->create();\n\t}\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\treturn Inertia::render('Index', [\n \t'articles' => Article::latest()->get()\n\t]);\n})->name('home');<\/code><\/pre>\nInertia<\/code> e non abbiamo utilizzato l’helper view()<\/code> di Laravel per restituire la vista, ma abbiamo invece usato Inertia::render<\/code>. Inoltre, per impostazione predefinita, Inertia cercher\u00e0 il nome del file che abbiamo indicato nel nostro percorso nella cartella Pages<\/strong> in “resources\/js”.<\/p>\nv-for<\/code> per mostrare i risultati. Tra i tag dello script, definite i dati passati come prop. Tutto ci\u00f2 che Inertia deve sapere \u00e8 il tipo di dati che vi aspettate, che nel nostro caso \u00e8 un oggetto “Articolo” contenente un array di articoli.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> per l’API di composizione di Vue.js 3. Se stiamo usando l’API di composizione di Vue.js 3, allora \u00e8 necessario definire il tipo di oggetto che ci aspettiamo. Se usassimo l’API delle opzioni, dovremmo restituirla.<\/p>\n<template>\n <KinstaLayout>\n\t<h2>Read our latest articles<\/h2>\n\n\t<section>\n \t\/\/ Looping over articles\n \t<article v-for=\"article in articles\":key=\"article.id\">\n \t<div>\n \t<img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n \t<\/div>\n\n \t<h3>{{article.title}}<\/h3>\n \t<p>{{article.excerpt}}<\/p>\n\n \t<a href=\"#\">Read more<\/a>\n \t<\/article>\n\t<\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nnpm run dev<\/code> (lasciandolo in esecuzione perch\u00e9 stiamo usando Vite) e php artisan serve<\/code> per avviare il server di sviluppo laravel e accedere al nostro sito web, vedremo la pagina prevista che mostra tutti i dieci articoli presenti nel database.<\/p>\n![\"L'estensione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Usare il CSS di Tailwind con Inertia.js<\/h2>\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n\t\".\/storage\/framework\/views\/*.php\",\n\t\".\/resources\/views\/**\/*.blade.php\",\n\t\".\/resources\/js\/**\/*.vue\",\n ],\n theme: {\n\textend: {},\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\tarticles: Object,\n });\n<\/script>\n\n<template>\n <KinstaLayout>\n\t<h2 class=\"text-2xl font-bold py-10\">Read our latest articles<\/h2>\n\n\t<section class=\"space-y-5 border-b-2 pb-10\">\n \t<article\n \tv-for=\"article in articles\"\n \t:key=\"article.id\"\n \tclass=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n \t>\n\n \t<img\n \tsrc=\"\/images\/kinsta-logo.png\"\n \tclass=\"w-32 h-32 rounded-xl object-cover\"\n \talt=\"\"\n \t\/>\n\n \t<div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n \t<h3\n \tclass=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n \t>\n \t<a href=\"#\">{{ article.title }}<\/a>\n \t<\/h3>\n \t<p>\n \t{{ article.excerpt }}\n \t<\/p>\n \t<a\n \thref=\"#\"\n \tclass=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n \t>Read more<\/a\n \t>\n \t<\/div>\n \t<\/article>\n\t<\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup><\/script>\n\n<template>\n\t<header\n \tclass=\"bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4\"\n\t>\n \t<h1 class=\"text-white font-bold text-4xl\">Kinsta Blog<\/h1>\n\t<\/header>\n\n\t<main class=\"container mx-auto text-center\">\n \t<slot \/>\n\t<\/main>\n\n\t<footer\n \tclass=\"bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto\"\n\t>\n \t<h2 class=\"font-bold text-xl pb-5\">Join our Newsletter<\/h2>\n\n \t<input\n \tclass=\"rounded-xl w-80 h-12 px-3 py-2 shadow-md\"\n \ttype=\"email\"\n \tplaceholder=\"Write your email..\"\n \t\/>\n\t<\/footer>\n<\/template><\/code><\/pre>\n![\"Un'immagine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Link di Inertia<\/h2>\n
<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n\treturn Inertia::render('Index', [\n \t'articles' => Article::latest()->get()\n\t]);\n})->name('home');\n\nRoute::get('\/posts\/{article:id}', function (Article $article) {\n\treturn Inertia::render('Show', [\n \t'article' => $article\n\t]);\n})->name('article.show');<\/code><\/pre>\n<Link><\/code>. Nell’introduzione abbiamo detto che Inertia usa <Link><\/code> come involucro per un tag di ancoraggio standard <a><\/code>, e che questo involucro ha lo scopo di rendere le visite alla pagina il pi\u00f9 fluide possibile. In Inertia, il tag <Link><\/code> pu\u00f2 comportarsi come un tag di ancoraggio che esegue richieste a <GET><\/code>, ma pu\u00f2 anche agire come <button><\/code> e <form><\/code> allo stesso tempo. Vediamo come applicarlo al nostro progetto.<\/p>\n<Link><\/code> da Inertia, rimuoveremo il tag di ancoraggio <a><\/code> e lo sostituiremo con il tag <Link><\/code> di Inertia. L’attributo href<\/code> sar\u00e0 impostato sull’URL del percorso che abbiamo creato in precedenza per visualizzare l’articolo:<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\nimport { Link } from \"@inertiajs\/inertia-vue3\";\n\ndefineProps({\n\tarticles: Object,\n});\n<\/script>\n\n<template>\n\t<KinstaLayout>\n \t<section class=\"space-y-5 border-b-2 pb-10\">\n \t<h2 class=\"text-2xl font-bold pt-10 mx-auto text-center\">\n \tRead our latest articles\n \t<\/h2>\n\n \t<article\n \tv-for=\"article in articles\"\n \t:key=\"article.id\"\n \tclass=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n \t>\n \t<img\n \tsrc=\"\/images\/kinsta-logo.png\"\n \tclass=\"w-32 h-32 rounded-xl object-cover\"\n \talt=\"\"\n \t\/>\n\n \t<div\n \tclass=\"flex flex-col text-left justify-between pl-3 space-y-5\"\n \t>\n \t<h3\n \tclass=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n \t>\n \t<Link :href=\"'\/posts\/' + article.id\">{{\n \tarticle.title\n \t}}<\/Link>\n \t<\/h3>\n \t<p>\n \t{{ article.excerpt }}\n \t<\/p>\n \t<Link\n \t:href=\"'\/posts\/' + article.id\"\n \tclass=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n \t>Read more\n \t<\/Link>\n \t<\/div>\n \t<\/article>\n \t<\/section>\n\t<\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\ndefineProps({\n\tarticle: Object,\n});\n<\/script>\n\n<template>\n\t<KinstaLayout>\n \t<article class=\"mx-auto mt-10 flex justify-center max-w-5xl border-b-2\">\n \t<img\n \tsrc=\"\/images\/kinsta-logo.png\"\n \tclass=\"w-80 h-80 rounded-xl mx-auto py-5\"\n \talt=\"\"\n \t\/>\n \t<div class=\"text-left flex flex-col pt-5 pb-10 px-10\">\n \t<h1 class=\"text-xl font-semibold mb-10\">{{ article.title }}<\/h1>\n \t<p>{{ article.body }}<\/p>\n \t<\/div>\n \t<\/article>\n\t<\/KinstaLayout>\n<\/template><\/code><\/pre>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> come tag di ancoraggio che invia una richiesta GET<\/code> al percorso e restituisce i nuovi dati, ma possiamo usare <Link><\/code> anche per POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nSuggerimenti e Trucchi su Laravel Inertia Che Dovresti Conoscere<\/h2>\n
Generare URL<\/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\ttitle: (title) => `${title} - ${appName}`,\n\tresolve: (name) =>\n \tresolvePageComponent(\n \t`.\/Pages\/${name}.vue`,\n \timport.meta.glob(\".\/Pages\/**\/*.vue\")\n \t),\n\tsetup({ el, app, props, plugin }) {\n \treturn createApp({ render: () => h(app, props) })\n \t.use(plugin)\n \t.use(ZiggyVue, Ziggy)\n \t.mount(el);\n\t},\n});<\/code><\/pre>\n@routes<\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\t\n\t<title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n\t\n\t@routes\n\t@vite('resources\/js\/app.js')\n\t@inertiaHead\n<\/head>\n\n<body class=\"font-sans antialiased\">\n\t@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>\nIndicatori di Progresso<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n