Pourquoi SPA ?<\/h2>\n
Avant de demander pourquoi nous devrions utiliser Inertia, nous devons d’abord nous demander : \u00ab Pourquoi SPA ? \u00bb<\/p>\n
Pourquoi pr\u00e9f\u00e9rerait-on les applications rendues c\u00f4t\u00e9 client aux applications traditionnelles c\u00f4t\u00e9 serveur ? Qu’est-ce qui forcerait un d\u00e9veloppeur Laravel full-stack \u00e0 dire adieu aux blade componets<\/a> ?<\/p>\n La r\u00e9ponse courte : parce que la vitesse et la r\u00e9activit\u00e9 sont essentielles \u00e0 tout engagement r\u00e9ussi de l’utilisateur.<\/p>\n Dans le cas des AMP, le navigateur envoie constamment des requ\u00eates au backend, qui ex\u00e9cute ensuite de nombreuses requ\u00eates de base de donn\u00e9es. Une fois que la base de donn\u00e9es et le serveur ont trait\u00e9 les requ\u00eates et les ont transmises au navigateur, la page est rendue.<\/p>\n Mais les SPA sont diff\u00e9rents. L’application apporte tout ce dont l’utilisateur a besoin directement sur la page, \u00e9liminant ainsi la n\u00e9cessit\u00e9 pour le navigateur d’envoyer des requ\u00eates ou de recharger la page pour rendre de nouveaux \u00e9l\u00e9ments HTML.<\/p>\n En raison de cette exp\u00e9rience utilisateur unique, de nombreuses entreprises de renom r\u00e9clament que leurs sites web deviennent des applications \u00e0 page unique.<\/p>\n Cela dit, la cr\u00e9ation d’une application \u00e0 page unique peut \u00eatre difficile pour les d\u00e9veloppeurs Laravel, car elle les obligerait \u00e0 commencer \u00e0 utiliser Vue.js ou React au lieu des mod\u00e8les de lame, ce qui entrainerait la perte de nombreux joyaux Laravel qui permettent d’\u00e9conomiser du temps et des efforts.<\/p>\n Mais maintenant que nous avons Inertia.js, tout cela a chang\u00e9.<\/p>\n Si les d\u00e9veloppeurs Laravel devaient construire des SPA web avec Vue avant Inertia, ils devaient configurer des API et renvoyer des donn\u00e9es JSON avec Laravel, puis utiliser quelque chose comme AXIOS pour r\u00e9cup\u00e9rer les donn\u00e9es dans les composants Vue. Ils auraient \u00e9galement besoin de quelque chose comme Vue Router pour g\u00e9rer les routes, ce qui signifierait perdre le routage Laravel, ainsi que les middlewares et les contr\u00f4leurs.<\/p>\n Inertia.js, en revanche, permet aux d\u00e9veloppeurs de construire des applications modernes \u00e0 page unique Vue, React et Svelte en utilisant un routage et des contr\u00f4leurs classiques c\u00f4t\u00e9 serveur. Inertia a \u00e9t\u00e9 con\u00e7u pour les d\u00e9veloppeurs de Laravel, Ruby on Rails et Django afin de leur permettre de cr\u00e9er des applications sans modifier leurs techniques de codage consistant \u00e0 cr\u00e9er des contr\u00f4leurs, \u00e0 extraire des donn\u00e9es d’une base de donn\u00e9es et \u00e0 rendre des vues<\/p>\n Gr\u00e2ce \u00e0 Inertia.js, les d\u00e9veloppeurs Laravel se sentiront comme chez eux.<\/p>\n Construire un SPA uniquement avec Laravel et Vue vous donnera une page JavaScript compl\u00e8te pour votre interface publique, mais cela ne vous fournira pas une exp\u00e9rience d’application \u00e0 page unique. Chaque lien cliqu\u00e9 entrainera le red\u00e9marrage de votre framework c\u00f4t\u00e9 client au chargement de la page suivante.<\/p>\n C’est l\u00e0 qu’Inertia entre en jeu.<\/p>\n Inertia est essentiellement une biblioth\u00e8que de routage c\u00f4t\u00e9 client. Elle vous permet de naviguer entre les pages sans avoir \u00e0 recharger la page enti\u00e8re. Ceci est r\u00e9alis\u00e9 par le biais du composant Lorsque vous cliquez sur un lien Inertia, Inertia intercepte le clic et vous redirige vers XHR \u00e0 la place. Le navigateur ne rechargera pas la page de cette fa\u00e7on, offrant ainsi \u00e0 l’utilisateur une exp\u00e9rience compl\u00e8te de page unique.<\/p>\n Pour comprendre Inertia et comment l’int\u00e9grer \u00e0 Laravel, nous allons construire une application web de blog nomm\u00e9e Kinsta Blog<\/strong> en utilisant le combo le plus puissant, Laravel pour le backend, Vue.js pour le frontend JavaScript et Tailwind CSS pour le styling.<\/p>\n Si vous pr\u00e9f\u00e9rez suivre ce tutoriel dans un environnement local, vous pouvez utiliser DevKinsta<\/a>, un outil puissant pour les d\u00e9veloppeurs, les concepteurs et les agences qui leur permet de construire des applications web WordPress \u00e0 une ou plusieurs pages. Heureusement, WordPress peut \u00eatre facilement int\u00e9gr\u00e9 \u00e0 Laravel \u00e0 l’aide du package Corcel<\/a>.<\/p>\n Pour tirer le meilleur parti de ce tutoriel, vous devez \u00eatre familiaris\u00e9 avec les \u00e9l\u00e9ments suivants :<\/p>\n Si vous n’\u00eates pas s\u00fbr de vous, consultez ces fantastiques tutoriels gratuits et payants sur Laravel<\/a>. Sinon, lan\u00e7ons-nous.<\/p>\n Pour vous concentrer sur Inertia.js et passer directement \u00e0 la partie amusante, assurez-vous d’avoir la configuration suivante pr\u00eate \u00e0 fonctionner :<\/p>\n \u00ab\u00a0\/resources\/views\/show.blade.php<\/strong>\u00a0\u00bb :<\/p>\n \u00ab\u00a0database\/migrations\/create_articles_table.php<\/strong>\u00a0\u00bb :<\/p>\n \u00ab\u00a0database\/factories\/ArticleFactory.php<\/strong>\u00a0\u00bb :<\/p>\n C’est tout ce dont nous avons besoin pour commencer ! Passons maintenant aux choses s\u00e9rieuses et introduisons Inertia.js dans notre projet.<\/p>\n Le processus d’installation d’Inertia est divis\u00e9 en deux grandes phases : c\u00f4t\u00e9 serveur (Laravel) et c\u00f4t\u00e9 client (VueJs).<\/p>\n Le guide d’installation officiel dans la documentation d’Inertia est un peu d\u00e9pass\u00e9 car Laravel 9 utilise d\u00e9sormais Vue<\/a> par d\u00e9faut, mais nous allons le parcourir \u00e9galement.<\/p>\n La premi\u00e8re chose que nous devons faire est d’installer les adaptateurs Inertia c\u00f4t\u00e9 serveur avec la commande terminal ci-dessous via Composer.<\/p>\n Maintenant, nous allons configurer notre mod\u00e8le racine, qui sera un fichier lame unique qui sera utilis\u00e9 pour charger vos fichiers CSS et JS, ainsi qu’une racine Inertia qui sera utilis\u00e9e pour lancer notre application JavaScript.<\/p>\n Comme nous utilisons la version la plus r\u00e9cente de Laravel 9 v9.3.1, nous devons \u00e9galement permettre \u00e0 Vite de faire fonctionner sa magie en l’incluant dans nos balises dans \/resources\/views\/app.blade.php <\/strong>:<\/p>\n Remarquez comment nous sommes capables de r\u00e9cup\u00e9rer le titre du projet de mani\u00e8re dynamique en ajoutant l’attribut Nous avons \u00e9galement ajout\u00e9 la directive Notre prochaine \u00e9tape sera de cr\u00e9er le middleware HandleInertiaRequests<\/strong> et de le publier dans notre projet. Nous pouvons le faire en lan\u00e7ant la commande de terminal ci-dessous dans le r\u00e9pertoire racine de notre projet :<\/p>\n Une fois cette op\u00e9ration termin\u00e9e, rendez-vous dans \u00ab App\/Http\/Kernel.php<\/strong> \u00bb et enregistrez Ensuite, nous devons installer les d\u00e9pendances de notre frontend Vue.js 3 de la m\u00eame mani\u00e8re que du c\u00f4t\u00e9 serveur :<\/p>\n Ensuite, vous devez installer Vue.js 3 :<\/p>\n Puis mettez \u00e0 jour votre fichier JavaScript principal pour initialiser Inertia.js avec Vue.js 3, Vite et Laravel :<\/p>\n \u00ab\u00a0resources\/js\/app.js<\/strong>\u00a0\u00bb :<\/p>\n Dans l’extrait de code ci-dessus, nous utilisons le plugin Tout ce qui reste \u00e0 faire est d’installer Et mettre \u00e0 jour le fichier vite.config.js<\/strong>\u00a0file :<\/p>\n L’\u00e9tape finale consiste \u00e0 installer nos d\u00e9pendances et \u00e0 compiler nos fichiers :<\/p>\n Et voil\u00e0 ! Vous vous \u00eates procur\u00e9 une application Laravel 9 fonctionnelle avec Vue.js 3 et Vite. Maintenant, nous devons voir quelque chose en action !<\/p>\n Vous vous souvenez de ces deux fichiers blade (index<\/strong> et show<\/strong>) pour afficher notre page d’accueil et un seul article ?<\/p>\n Le seul fichier blade dont nous aurons besoin en utilisant Inertia est app.blade.php<\/strong>, que nous avons d\u00e9j\u00e0 utilis\u00e9 une fois lors de l’installation d’Inertia. Alors qu’advient-il de ces fichiers maintenant ?<\/p>\n Nous allons transformer ces fichiers de composants blade en composants Inertia.js.<\/p>\n Chaque page de votre application poss\u00e8de son propre contr\u00f4leur et composant JavaScript avec Inertia. Cela vous permet d’obtenir uniquement les donn\u00e9es requises pour cette page, sans utiliser une API. Les pages Inertia ne sont rien d’autre que des composants JavaScript, dans notre cas, ce sont des composants Vue.js. Elles n’ont rien de particuli\u00e8rement remarquable \u00e0 leur sujet. Donc, ce que nous allons faire, c’est envelopper tout le contenu HTML entre les balises Cr\u00e9ez un dossier appel\u00e9 \u00ab Pages \u00bb et d\u00e9placez-y vos fichiers. Nous aurons donc \u00ab index.blade.php<\/strong> \u00bb et \u00ab show.blade.php<\/strong> \u00bb dans \u00ab .\/resources\/js\/Pages<\/strong> \u00bb. Ensuite, nous modifierons le format du fichier en \u00ab .vue \u00bb au lieu de \u00ab .blade.php \u00bb tout en mettant la premi\u00e8re lettre de leurs noms en majuscule et nous transformerons son contenu en un composant Vue.js standard. Nous exclurons les balises \u00ab resources\/js\/Pages\/Index.vue<\/strong> \u00bb :<\/p>\n \u00ab\u00a0resources\/js\/Pages\/Show.vue<\/strong>\u00a0\u00bb :<\/p>\n Il y a quelque chose qui me d\u00e9range vraiment ! Nous continuons \u00e0 copier et coller notre en-t\u00eate et notre pied de page dans chaque composant, ce qui n’est pas une tr\u00e8s bonne pratique. Cr\u00e9ons un Layout de base Inertia pour stocker nos composants persistants.<\/p>\n Cr\u00e9ez un dossier appel\u00e9 \u00ab Layouts \u00bb dans \u00ab \/resources\/js<\/strong> \u00bb et dans ce dossier, cr\u00e9ez un fichier nomm\u00e9 \u00ab KinstaLayout.vue \u00bb. Ce fichier contiendra notre en-t\u00eate et notre pied de page et le \u00ab resources\/js\/Layouts\/KinstaLayout.vue<\/strong> \u00bb :<\/p>\n Ensuite, nous allons importer cette nouvelle mise en page dans nos pages et envelopper tout le contenu HTML avec elle. Nos composants devraient ressembler \u00e0 ceci :<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Tout d’abord, utilisons le fichier \u00ab ArticleFactory<\/strong> \u00bb que nous avons depuis le point de d\u00e9part de notre tutoriel et semons quelques articles dans notre base de donn\u00e9es.<\/p>\n \u00ab database\/seeders\/databaseSeeder.php<\/strong> \u00bb :<\/p>\n Ensuite, saisissez la commande terminal ci-dessous pour migrer vos tables et ensemencer les fausses donn\u00e9es des usines :<\/p>\n Ceci cr\u00e9era 10 faux articles dans la base de donn\u00e9es, que nous devrons passer \u00e0 notre vue en utilisant le routage Laravel. Maintenant que nous utilisons Inertia pour rendre les vues, la fa\u00e7on dont nous \u00e9crivions nos routes va l\u00e9g\u00e8rement changer. Cr\u00e9ons notre premi\u00e8re route Laravel Inertia dans \u00ab routes\/web.php<\/strong> \u00bb et renvoyons la vue de la page d’accueil depuis \u00ab \/resources\/js\/Pages\/Index.vue<\/strong> \u00bb.<\/p>\n \u00ab routes\/web.php<\/strong> \u00bb :<\/p>\n Remarquez que nous avons import\u00e9 Dirigez-vous vers le fichier d’Index et d\u00e9finissez les donn\u00e9es r\u00e9cup\u00e9r\u00e9es en tant que prop et bouclez sur elles avec \u00ab resources\/js\/Pages\/Index.vue<\/strong> \u00bb :<\/p>\n Notez qu’il suffit de le d\u00e9finir comme prop sans le renvoyer car nous utilisons le format Faisons la boucle :<\/p>\n Maintenant, nous utilisons l’extension Vue DevTools de Google Chrome<\/a>, qui nous permet de d\u00e9boguer mon application. Nous allons vous montrer comment nos donn\u00e9es sont transmises au composant.<\/p>\n \u00ab articles \u00bb est transmis au composant en tant qu’objet prop contenant un tableau d’articles ; chaque article du tableau est \u00e9galement un objet avec des propri\u00e9t\u00e9s qui correspondent aux donn\u00e9es qu’il a acquises de la base de donn\u00e9es. Cela signifie que toute donn\u00e9e que nous transf\u00e9rons de Laravel \u00e0 Inertia sera trait\u00e9e comme un objet prop.<\/p>\n Puisque Tailwind est d\u00e9j\u00e0 install\u00e9 dans notre projet au point de d\u00e9part, tout ce que nous devons faire est de lui dire de lire nos composants Inertia. Ceci peut \u00eatre accompli en modifiant \u00ab tailwind.config.js<\/strong> \u00bb comme ci-dessous :<\/p>\n Assurez-vous ensuite que nous avons import\u00e9 notre fichier CSS dans \u00ab resources\/js\/app.js<\/strong> \u00bb :<\/p>\n Et maintenant nous sommes pr\u00eats \u00e0 styliser nos composants.<\/p>\n \u00ab resources\/js\/Pages\/Index.vue<\/strong> \u00bb :<\/p>\n \u00ab resources\/js\/Layouts\/KinstaLayout.vue<\/strong> \u00bb :<\/p>\n Si vous regardez le navigateur, vous remarquerez que Vite a d\u00e9j\u00e0 mis \u00e0 jour la page avec la magie de Tailwind.<\/p>\n Maintenant que nous avons une page d’accueil fonctionnelle qui peut afficher tous les articles de la base de donn\u00e9es, nous devons cr\u00e9er une autre route pour afficher les articles individuels. Cr\u00e9ons une nouvelle route et d\u00e9finissons l’URL avec un caract\u00e8re g\u00e9n\u00e9rique \u00ab id \u00bb :<\/p>\n \u00ab\u00a0routes\/web.php<\/strong>\u00a0\u00bb<\/p>\n Nous avons import\u00e9 le mod\u00e8le \u00ab Article \u00bb et ajout\u00e9 une nouvelle route pour renvoyer le composant Inertia Show.vue<\/strong>. Nous avons \u00e9galement tir\u00e9 parti de la liaison de mod\u00e8le de route de Laravel<\/a>, qui permet \u00e0 Laravel d’obtenir automatiquement l’article auquel nous faisons r\u00e9f\u00e9rence.<\/p>\n Tout ce dont nous avons besoin maintenant, c’est d’un moyen de visiter cette route en cliquant sur un lien de la page d’accueil sans avoir \u00e0 recharger la page enti\u00e8re. Ceci est possible gr\u00e2ce \u00e0 l’outil magique d’Inertia Dans notre Index.vue, nous allons importer Nous allons styliser Show.vue<\/strong> avec Tailwind pour qu’il ait l’air un peu plus habill\u00e9 et pr\u00eat pour notre visite. Nous devons \u00e9galement lui faire savoir qu’il doit s’attendre \u00e0 un objet \u00ab Article \u00bb et le d\u00e9finir en tant qu’accessoire :<\/p>\n Maintenant, lorsque nous cliquons sur le titre de l’article ou sur \u00ab Read more \u00bb, nous serons magiquement transport\u00e9s vers Show.vue<\/strong> sans rafra\u00eechir la page.<\/p>\n Dans notre cas, nous utilisons \u00ab routes\/web.php<\/strong> \u00bb :<\/p>\n Nous avons maintenant un SPA fonctionnel construit avec Laravel, Inertia et Tailwind CSS. Mais Inertia peut nous aider \u00e0 r\u00e9aliser bien plus. Il est temps d’acqu\u00e9rir quelques techniques Inertia qui aideront \u00e0 la fois les d\u00e9veloppeurs et les visiteurs de l’application.<\/p>\n Vous avez peut-\u00eatre remarqu\u00e9 que nous avons ajout\u00e9 des noms \u00e0 nos routes Laravel sans les utiliser. Inertia nous permet d’utiliser nos routes nomm\u00e9es dans nos composants au lieu d’\u00e9crire manuellement la route compl\u00e8te.<\/p>\n Nous pouvons y parvenir en installant le paquetage Ziggy<\/a> dans notre projet :<\/p>\n Ensuite, allez dans \u00ab resources\/js\/app.js \u00bb et mettez-le \u00e0 jour comme ceci :<\/p>\n Allez dans \u00ab \/resources\/views\/app.blade.php<\/strong> \u00bb et mettez \u00e0 jour le head avec la directive …et rafra\u00eechissez vos paquets NPM en tapant les deux commandes de terminal ci-dessous :<\/p>\n Ce paquetage nous permet d’utiliser des routes nomm\u00e9es dans nos composants Inertia. Dirigeons-nous donc vers Index.vue<\/strong> et supprimons l’ancienne route manuelle pour la remplacer par le nom de la route tout en transmettant les donn\u00e9es normalement comme si nous \u00e9tions dans notre contr\u00f4leur.<\/p>\n Nous allons remplacer ceci :<\/p>\n …par ceci :<\/p>\n Cela nous donnera exactement le m\u00eame comportement que nous avions, mais c’est plus convivial pour les d\u00e9veloppeurs et extr\u00eamement utile lorsque votre itin\u00e9raire attend de nombreux param\u00e8tres.<\/p>\n Il s’agit de l’une des caract\u00e9ristiques les plus int\u00e9ressantes d’Inertia.js ; \u00e9tant donn\u00e9 que les SPA offrent une exp\u00e9rience interactive \u00e0 l’utilisateur, le fait d’avoir un retour constant sur le chargement d’une requ\u00eate serait un ajout fantastique \u00e0 l’application. Ceci peut \u00eatre accompli par une biblioth\u00e8que s\u00e9par\u00e9e qu’Inertia offre.<\/p>\n La biblioth\u00e8que \u00ab @inertiajs\/progress \u00bb est une enveloppe autour de NProgress<\/a> qui affiche conditionnellement les indicateurs de chargement en fonction des \u00e9v\u00e9nements Inertia. Vous n’avez pas vraiment besoin de savoir comment cela fonctionne dans les coulisses, alors faisons en sorte que cela fonctionne.<\/p>\n Nous pouvons installer cette biblioth\u00e8que avec la commande de terminal ci-dessous :<\/p>\n Une fois install\u00e9e, nous devons l’importer dans \u00ab Pourquoi Inertia ?<\/h2>\n
Comment fonctionne Inertia ?<\/h2>\n
<Link><\/code>, qui est une enveloppe l\u00e9g\u00e8re autour d’une balise d’ancrage standard.<\/p>\nD\u00e9marrer avec Inertia<\/h2>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Conditions pr\u00e9alables<\/h3>\n
\n
\u00c9tape 1 : installer les \u00e9l\u00e9ments de base<\/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> connect\u00e9e \u00e0 notre projet : \u00ab .env <\/strong>\u00bb :\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>\n\u00c9tape 2 : Installer Inertia<\/h3>\n
1. C\u00f4t\u00e9 serveur<\/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 <!-- Fetch project name dynamically -->\n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n <!-- Scripts -->\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> aux balises <title><\/code>.<\/p>\n@vite<\/code> \u00e0 l’en-t\u00eate afin de faire conna\u00eetre \u00e0 Vite le chemin de notre fichier principal JavaScript o\u00f9 nous avons cr\u00e9\u00e9 notre application et import\u00e9 notre CSS. Vite est un outil qui facilite le d\u00e9veloppement JavaScript et CSS en permettant aux d\u00e9veloppeurs de visualiser les modifications apport\u00e9es au frontend sans avoir \u00e0 actualiser la page pendant le d\u00e9veloppement local.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> comme dernier \u00e9l\u00e9ment de vos middlewares web :<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. C\u00f4t\u00e9 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 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> de Laravel, et nous lui demandons de r\u00e9soudre nos composants \u00e0 partir du r\u00e9pertoire .\/Pages\/$name.vue<\/strong>. En effet, nous enregistrerons nos composants Inertia dans ce r\u00e9pertoire plus tard dans notre projet, et cette extension nous aidera \u00e0 charger automatiquement ces composants depuis le bon r\u00e9pertoire.<\/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>\nCr\u00e9ation de pages Inertia<\/h2>\n
<template><\/code> et tout ce qui est li\u00e9 \u00e0 JavaScript sera envelopp\u00e9 avec les balises <script><\/code>.<\/p>\n<html><\/code>, <head><\/code>, et <body><\/code> car elles sont d\u00e9j\u00e0 incluses dans le composant racine principal de la lame.<\/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> avec un <slot \/><\/code> pour permettre \u00e0 tous les composants envelopp\u00e9s avec cette mise en page d’\u00eatre int\u00e9gr\u00e9s \u00e0 l’int\u00e9rieur. Ce fichier devrait ressembler \u00e0 ceci :<\/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>\nRoutes Laravel et rendu Inertia<\/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> et que nous n’avons pas utilis\u00e9 l’aide Laravel view()<\/code> pour retourner la vue, mais plut\u00f4t Inertia::render<\/code>. Inertia recherchera \u00e9galement par d\u00e9faut le nom du fichier que nous avons mentionn\u00e9 dans notre route dans le dossier Pages<\/strong> \u00e0 \u00ab resources\/js \u00bb.<\/p>\nv-for<\/code> pour afficher les r\u00e9sultats. Entre les balises de script, d\u00e9finissez les donn\u00e9es pass\u00e9es en tant qu’accessoire. Tout ce qu’Inertia doit savoir est le type de donn\u00e9es que vous attendez, qui dans notre cas est un objet ‘Article’ contenant un tableau d’articles.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> pour l’API de composition de Vue.js 3. Si nous utilisions l’API d’options, nous devrions le renvoyer.<\/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> (laissez-la en cours d’ex\u00e9cution car nous utilisons Vite) et php artisan serve<\/code> pour d\u00e9marrer le serveur de d\u00e9veloppement laravel et acc\u00e9der \u00e0 notre site web, nous verrons la page attendue affichant les dix articles de la base de donn\u00e9es.<\/p>\n![\"Inspecter](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Utilisation de Tailwind CSS avec 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![\"Rendu](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Liens Inertia<\/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>. Nous avons mentionn\u00e9 dans l’introduction qu’Inertia utilise <Link><\/code> comme enveloppe pour une balise d’ancrage standard <a><\/code>, et que cette enveloppe est destin\u00e9e \u00e0 rendre les visites de pages aussi transparentes que possible. Dans Inertia, la balise <Link><\/code> peut se comporter comme une balise d’ancrage qui ex\u00e9cute les requ\u00eates <GET><\/code>, mais elle peut aussi agir comme une <button><\/code> et une <form><\/code> en m\u00eame temps. Voyons comment nous pouvons l’appliquer \u00e0 notre projet.<\/p>\n<Link><\/code> d’Inertia, et supprimer les balises d’ancrage <a><\/code> et les remplacer par des balises Inertia <Link><\/code>. L’attribut href<\/code> sera d\u00e9fini sur l’URL de la route que nous avons pr\u00e9c\u00e9demment cr\u00e9\u00e9e pour la consultation de l’article :<\/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![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> comme balise d’ancrage qui envoie une requ\u00eate GET<\/code> \u00e0 la route et renvoie les nouvelles donn\u00e9es, mais nous pouvons utiliser <Link><\/code> pour \u00e9galement POST<\/code>, PUT<\/code>, PATCH<\/code> et DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nTrucs et astuces de Laravel Inertia que vous devriez conna\u00eetre<\/h2>\n
G\u00e9n\u00e9rer des 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 title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mount(el);\n },\n});<\/code><\/pre>\n@routes<\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <!-- Fetch project name dynamically -->\n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n <!-- Scripts -->\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>\nIndicateurs de progression<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n