\n
\u00bfPor qu\u00e9 SPA?<\/h2>\n
Antes de preguntarnos por qu\u00e9 deber\u00edamos utilizar Inertia, debemos preguntarnos: \u00ab\u00bfPor qu\u00e9 SPA?\u00bb<\/p>\n
\u00bfPor qu\u00e9 alguien preferir\u00eda las aplicaciones renderizadas del lado del cliente a las aplicaciones tradicionales del lado del servidor? \u00bfQu\u00e9 obligar\u00eda a un desarrollador Laravel full-stack a decir adi\u00f3s a los componentes blade<\/a>?<\/p>\n La respuesta corta es: porque la velocidad y la capacidad de respuesta son esenciales para el \u00e9xito de cualquier interacci\u00f3n con el usuario.<\/p>\n En el caso de las MPA, el navegador env\u00eda constantemente peticiones al backend, que ejecuta numerosas consultas a la base de datos. Despu\u00e9s de que la base de datos y el servidor procesen las consultas y las entreguen al navegador, se renderiza la p\u00e1gina.<\/p>\n Pero las SPA son diferentes. La aplicaci\u00f3n lleva todo lo que el usuario necesitar\u00eda directamente a la p\u00e1gina, eliminando la necesidad de que el navegador env\u00ede consultas o recargue la p\u00e1gina para renderizar nuevos elementos HTML.<\/p>\n Debido a esta experiencia de usuario \u00fanica, muchas grandes empresas est\u00e1n pidiendo a gritos que sus sitios web se conviertan en aplicaciones de una sola p\u00e1gina.<\/p>\n Dicho esto, crear una aplicaci\u00f3n de una sola p\u00e1gina puede ser dif\u00edcil para los desarrolladores de Laravel, porque les obligar\u00eda a empezar a utilizar Vue.js o React en lugar de plantillas de hoja, lo que supondr\u00eda la p\u00e9rdida de muchas gemas de Laravel que ahorran tiempo y esfuerzo.<\/p>\n Sin embargo, ahora que tenemos Inertia.js, eso ha cambiado.<\/p>\n Si los desarrolladores de Laravel construyeran SPA web con Vue antes de Inertia, tendr\u00edan que configurar API y devolver datos JSON con Laravel, y luego utilizar algo como AXIOS para recuperar los datos en componentes Vue. Tambi\u00e9n necesitar\u00edan algo como Vue Router para gestionar las rutas, lo que significar\u00eda perder el enrutamiento de Laravel, as\u00ed como los middlewares y controladores.<\/p>\n Inertia.js, por otro lado, permite a los desarrolladores construir modernas aplicaciones Vue, React y Svelte de una sola p\u00e1gina utilizando enrutamiento y controladores cl\u00e1sicos del lado del servidor. Inertia se dise\u00f1\u00f3 para que los desarrolladores de Laravel, Ruby on Rails y Django pudieran crear aplicaciones sin cambiar sus t\u00e9cnicas de codificaci\u00f3n de creaci\u00f3n de controladores, obtenci\u00f3n de datos de una base de datos y representaci\u00f3n de vistas<\/p>\n Gracias a Inertia.js, los desarrolladores de Laravel se sentir\u00e1n como en casa.<\/p>\n Construir SPA s\u00f3lo con Laravel y Vue te dar\u00e1 una p\u00e1gina JavaScript completa para tu frontend, pero esto no te proporcionar\u00e1 una experiencia de aplicaci\u00f3n de una sola p\u00e1gina. Cada enlace pulsado har\u00e1 que tu framework del lado del cliente se reinicie en la siguiente carga de p\u00e1gina.<\/p>\n Aqu\u00ed es donde entra en escena la Inertia.<\/p>\n Inertia es b\u00e1sicamente una biblioteca de enrutamiento del lado del cliente. Te permite navegar entre p\u00e1ginas sin tener que recargar toda la p\u00e1gina. Esto se consigue mediante el componente Cuando haces clic en un enlace Inertia intercepta el clic y te redirige a XHR. El navegador no recargar\u00e1 la p\u00e1gina de esta forma, proporcionando al usuario una experiencia completa de una sola p\u00e1gina.<\/p>\n Para entender Inertia y c\u00f3mo integrarlo con Laravel, vamos a construir una aplicaci\u00f3n web de blog llamada Kinsta Blog<\/strong> utilizando el combo m\u00e1s potente, Laravel para el backend, Vue.js para el frontend JavaScript, y Tailwind CSS para el estilo.<\/p>\n Si prefieres seguir este tutorial en un entorno local, puedes utilizar DevKinsta<\/a>, una potente herramienta para desarrolladores, dise\u00f1adores y agencias que les permite construir aplicaciones web de WordPress de una o varias p\u00e1ginas. Afortunadamente, WordPress puede integrarse f\u00e1cilmente con Laravel utilizando el paquete Corcel<\/a>.<\/p>\n Para sacar el m\u00e1ximo partido a este tutorial, debes estar familiarizado con lo siguiente:<\/p>\n Si te sientes inseguro, consulta estos fant\u00e1sticos tutoriales gratuitos y de pago de Laravel<\/a>. De lo contrario, empecemos.<\/p>\n Para centrarte en Inertia.js y pasar directamente a la parte divertida, aseg\u00farate de tener lista la siguiente configuraci\u00f3n:<\/p>\n \u00ab\/resources\/views\/show.blade.php<\/strong>\u00ab:<\/p>\n \u00abdatabase\/migrations\/create_articles_table.php<\/strong>\u00ab:<\/p>\n \u00abdatabase\/factories\/ArticleFactory.php<\/strong>\u00ab:<\/p>\n \u00a1Esto es todo lo que necesitamos para empezar! Ahora pong\u00e1monos manos a la obra e introduzcamos Inertia.js a nuestro proyecto.<\/p>\n El proceso de instalaci\u00f3n de Inertia se divide en dos fases principales: del lado del servidor (Laravel) y del lado del cliente (VueJs).<\/p>\n La gu\u00eda oficial de instalaci\u00f3n en la documentaci\u00f3n de Inertia est\u00e1 un poco desfasada porque Laravel 9 ahora utiliza Vite<\/a> por defecto, pero tambi\u00e9n la revisaremos.<\/p>\n Lo primero que tenemos que hacer es instalar los adaptadores Inertia del lado del servidor con el siguiente comando de terminal a trav\u00e9s de Composer.<\/p>\n Ahora configuraremos nuestra plantilla ra\u00edz, que ser\u00e1 un \u00fanico archivo blade que se utilizar\u00e1 para cargar tus archivos CSS y JS, as\u00ed como una ra\u00edz Inertia que se utilizar\u00e1 para lanzar nuestra aplicaci\u00f3n JavaScript.<\/p>\n Como estamos utilizando la versi\u00f3n m\u00e1s reciente Laravel 9 v9.3.1, tambi\u00e9n debemos habilitar Vite para que haga su magia incluy\u00e9ndolo dentro de nuestras etiquetas en \/resources\/views\/app.blade.php<\/strong> :<\/p>\n Observa c\u00f3mo podemos obtener el t\u00edtulo del proyecto de forma din\u00e1mica a\u00f1adiendo el atributo Tambi\u00e9n a\u00f1adimos la directiva Nuestro siguiente paso ser\u00e1 crear el middleware HandleInertiaRequests<\/strong> y publicarlo en nuestro proyecto. Podemos hacerlo ejecutando el siguiente comando de terminal dentro del directorio ra\u00edz de nuestro proyecto:<\/p>\n Una vez completado esto, dir\u00edgete a \u00abApp\/Http\/Kernel.php<\/strong>\u00bb y registra A continuaci\u00f3n, tenemos que instalar las dependencias de nuestro frontend Vue.js 3 del mismo modo que en el lado del servidor:<\/p>\n A continuaci\u00f3n, tienes que instalar Vue.js 3:<\/p>\n A continuaci\u00f3n, actualiza tu archivo JavaScript principal para inicializar Inertia.js con Vue.js 3, Vite y Laravel:<\/p>\n \u00abresources\/js\/app.js<\/strong>\u00ab:<\/p>\n En el fragmento de c\u00f3digo anterior, utilizamos el plugin de Laravel Lo \u00fanico que nos queda es instalar Y actualizar el archivo vite.config.js<\/strong>:<\/p>\n El \u00faltimo paso es instalar nuestras dependencias y compilar nuestros archivos:<\/p>\n \u00a1Y voil\u00e0! Ya tienes una aplicaci\u00f3n Laravel 9 funcionando con Vue.js 3 y Vite. \u00a1Ahora tenemos que verlo en acci\u00f3n!<\/p>\n \u00bfRecuerdas esos dos archivos blade (index<\/strong> y show<\/strong>) para ver nuestra p\u00e1gina de inicio y un solo art\u00edculo?<\/p>\n El \u00fanico archivo blade que necesitaremos mientras utilicemos Inertia es app.blade.php<\/strong>, que ya utilizamos una vez cuando instalamos Inertia. \u00bfQu\u00e9 ocurre ahora con esos archivos?<\/p>\n Transformaremos esos archivos de componentes blade en componentes Inertia.js.<\/p>\n Cada p\u00e1gina de tu aplicaci\u00f3n tiene su propio controlador y componente JavaScript con Inertia. Esto te permite obtener s\u00f3lo los datos necesarios para esa p\u00e1gina, sin utilizar una API. Las p\u00e1ginas Inertia no son m\u00e1s que componentes JavaScript, en nuestro caso, son componentes Vue.js. No tienen nada especialmente destacable. As\u00ed que lo que haremos ser\u00e1 envolver todo el contenido HTML entre etiquetas Crea una carpeta llamada \u00abPages\u00bb y mueve tus archivos all\u00ed. As\u00ed que tendremos \u00abindex.blade.php<\/strong>\u00bb y \u00abshow.blade.php<\/strong>\u00bb en \u00ab.\/resources\/js\/Pages<\/strong>\u00ab. A continuaci\u00f3n, cambiaremos el formato del archivo a \u00ab.vue\u00bb en lugar de \u00ab.blade.php\u00bb, haremos que la primera letra de sus nombres est\u00e9 en may\u00fasculas y convertiremos su contenido en un componente Vue.js est\u00e1ndar. Excluiremos las etiquetas \u00abresources\/js\/Pages\/Index.vue<\/strong>\u00ab:<\/p>\n \u00abresources\/js\/Pages\/Show.vue<\/strong>\u00ab:<\/p>\n \u00a1Hay algo que me molesta mucho! Seguimos copiando y pegando nuestro encabezado y pie de p\u00e1gina en cada componente, lo que no es una pr\u00e1ctica muy buena. Vamos a crear un Layout b\u00e1sico de Inertia para almacenar nuestros componentes persistentes.<\/p>\n Crea una carpeta llamada \u00abLayouts\u00bb en \u00ab\/resources\/js<\/strong>\u00bb y dentro de esa carpeta crea un archivo llamado \u00abKinstaLayout.vue\u00bb. Este archivo tendr\u00e1 nuestra cabecera y pie de p\u00e1gina y el \u00abresources\/js\/Layouts\/KinstaLayout.vue<\/strong>\u00ab:<\/p>\n A continuaci\u00f3n, vamos a importar este nuevo dise\u00f1o en nuestras p\u00e1ginas y envolver todo el contenido HTML con \u00e9l. Nuestros componentes deber\u00edan tener este aspecto:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Primero vamos a utilizar el archivo \u00abArticleFactory<\/strong>\u00bb que tenemos desde el punto de partida de nuestro tutorial y a sembrar algunos art\u00edculos en nuestra base de datos.<\/p>\n \u00abdatabase\/seeders\/databaseSeeder.php<\/strong>\u00ab:<\/p>\n A continuaci\u00f3n, utiliza el siguiente comando de terminal para migrar tus tablas y sembrar los datos falsos de las factory:<\/p>\n Esto crear\u00e1 10 art\u00edculos falsos en la base de datos, que tendremos que pasar a nuestra vista utilizando las rutas de Laravel. Ahora que estamos utilizando Inertia para renderizar vistas, la forma en que sol\u00edamos escribir nuestras rutas cambiar\u00e1 ligeramente. Creemos nuestra primera ruta Laravel Inertia en \u00abroutes\/web.php<\/strong>\u00bb y devolvamos la vista de la p\u00e1gina principal desde \u00ab\/resources\/js\/Pages\/Index.vue<\/strong>\u00ab.<\/p>\n \u00abroutes\/web.php<\/strong>\u00ab:<\/p>\n Observa que hemos importado Dir\u00edgete al archivo \u00edndice y establece los datos recuperados como prop y haz un bucle sobre ellos con \u00abresources\/js\/Pages\/Index.vue<\/strong>\u00ab:<\/p>\n Ten en cuenta que basta con definirlo como prop sin devolverlo porque estamos utilizando el formato Hagamos el bucle:<\/p>\n Ahora, estamos utilizando la extensi\u00f3n Vue DevTools de Google Chrome<\/a>, que nos permite depurar mi aplicaci\u00f3n. Vamos a mostrarte c\u00f3mo se pasan nuestros datos al componente.<\/p>\n \u00abarticles\u00bb se pasa al componente como un objeto prop que contiene una matriz de art\u00edculos; cada art\u00edculo de la matriz es tambi\u00e9n un objeto con propiedades que corresponden a los datos que adquiri\u00f3 de la base de datos. Esto significa que cualquier dato que transfiramos de Laravel a Inertia ser\u00e1 tratado como un objeto prop.<\/p>\n Dado que ya hemos instalado Tailwind en nuestro proyecto en el punto de partida, todo lo que tenemos que hacer es decirle que lea nuestros componentes de Inertia. Esto se puede conseguir editando \u00abtailwind.config.js<\/strong>\u00bb de la siguiente manera:<\/p>\n A continuaci\u00f3n, aseg\u00farate de que hemos importado nuestro archivo CSS en \u00abresources\/js\/app.js<\/strong>\u00ab:<\/p>\n Y ahora estamos listos para dar estilo a nuestros componentes.<\/p>\n \u00abresources\/js\/Pages\/Index.vue<\/strong>\u00ab:<\/p>\n \u00abresources\/js\/Layouts\/KinstaLayout.vue<\/strong>\u00ab:<\/p>\n Si miras el navegador, ver\u00e1s que Vite ya ha actualizado la p\u00e1gina con la magia de Tailwind.<\/p>\n Ahora que tenemos una p\u00e1gina de inicio que funciona y que puede mostrar todos los art\u00edculos de la base de datos, necesitamos crear otra ruta para mostrar art\u00edculos individuales. Creemos una nueva ruta y establezcamos la URL con un comod\u00edn \u00abid\u00bb:<\/p>\n \u00abroutes\/web.php<\/strong>\u00bb<\/p>\n Importamos el modelo \u00abArt\u00edculo\u00bb y a\u00f1adimos una nueva ruta para devolver el componente Show.vue<\/strong> Inertia. Tambi\u00e9n aprovechamos la vinculaci\u00f3n del modelo de rutas de Laravel<\/a>, que permite a Laravel obtener autom\u00e1ticamente el art\u00edculo al que nos referimos.<\/p>\n Todo lo que necesitamos ahora es una forma de visitar esta ruta haciendo clic en un enlace de la p\u00e1gina principal sin tener que recargar toda la p\u00e1gina. Esto es posible con la herramienta m\u00e1gica de Inertia En nuestro Index.vue, importaremos Estilicemos Show.vue<\/strong> con Tailwind para que parezca un poco m\u00e1s arreglado y listo para nuestra visita. Y tambi\u00e9n tenemos que hacerle saber que debe esperar un objeto \u00abArt\u00edculo\u00bb y establecerlo como prop:<\/p>\n Ahora, cuando hagamos clic en el t\u00edtulo del art\u00edculo o en \u00abRead more\u00bb, seremos transportados m\u00e1gicamente a Show.vue<\/strong> sin actualizar la p\u00e1gina.<\/p>\n En nuestro caso, estamos utilizando \u00abroutes\/web.php<\/strong>\u00ab:<\/p>\n Ya tenemos una SPA funcional construida con Laravel, Inertia y Tailwind CSS. Pero Inertia puede ayudarnos a conseguir mucho m\u00e1s. Es hora de adquirir algunas t\u00e9cnicas de Inertia que ayudar\u00e1n tanto a los desarrolladores como a los visitantes de la aplicaci\u00f3n.<\/p>\n Te habr\u00e1s dado cuenta de que hemos estado a\u00f1adiendo nombres a nuestras rutas Laravel sin utilizarlas. Inertia nos permite utilizar nuestras rutas con nombre dentro de nuestros componentes en lugar de escribir manualmente la ruta completa.<\/p>\n Podemos conseguirlo instalando el paquete Ziggy<\/a> en nuestro proyecto:<\/p>\n A continuaci\u00f3n, dir\u00edgete a \u00abresources\/js\/app.js\u00bb y actual\u00edzalo de la siguiente manera:<\/p>\n Dir\u00edgete a \u00ab\/resources\/views\/app.blade.php<\/strong>\u00bb y actualiza la cabecera con la directiva …y actualiza tus paquetes NPM pulsando los dos comandos de terminal siguientes:<\/p>\n Este paquete nos permite utilizar rutas con nombre dentro de nuestros componentes Inertia, as\u00ed que dirij\u00e1monos a Index.vue<\/strong> y eliminaremos la antigua ruta manual y la sustituiremos por el nombre de la ruta mientras pasamos los datos normalmente como si estuvi\u00e9ramos en nuestro controlador.<\/p>\n Reemplazaremos esto<\/p>\n …por esto:<\/p>\n Esto nos dar\u00e1 exactamente el mismo comportamiento que ten\u00edamos, pero es m\u00e1s amigable para el desarrollador y extremadamente \u00fatil cuando tu ruta espera muchos par\u00e1metros.<\/p>\n Esta es una de las caracter\u00edsticas m\u00e1s agradables de Inertia.js; dado que SPA proporciona una experiencia de usuario interactiva, disponer de informaci\u00f3n constante sobre si una solicitud se est\u00e1 cargando ser\u00eda una fant\u00e1stica adici\u00f3n a la aplicaci\u00f3n. Esto puede conseguirse mediante una biblioteca independiente que ofrece Inertia.<\/p>\n La biblioteca \u00ab@inertiajs\/progress\u00bb es una envoltura alrededor de NProgress<\/a> que muestra condicionalmente los indicadores de carga seg\u00fan los eventos de Inertia. Realmente no necesitas saber c\u00f3mo funciona esto entre bastidores, as\u00ed que vamos a ponerlo en marcha.<\/p>\n Podemos instalar esta biblioteca con el siguiente comando de terminal:<\/p>\n Una vez instalada, tenemos que importarla en \u00ab\u00bfPor qu\u00e9 Inertia?<\/h2>\n
C\u00f3mo funciona Inertia<\/h2>\n
<Link><\/code>, que es una envoltura ligera alrededor de una etiqueta de anclaje est\u00e1ndar.<\/p>\nPrimeros pasos con Inertia<\/h2>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Requisitos previos<\/h3>\n
\n
Paso 1: Instalar los elementos principales<\/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> conectada a nuestro proyecto:\u00bb.env<\/strong>\u00ab:\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>\nPaso 2: Instalar Inertia<\/h3>\n
1. Del lado del servidor<\/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> a las etiquetas <title><\/code>.<\/p>\n@vite<\/code> a la cabecera para que Vite conozca la ruta de nuestro archivo principal JavaScript donde creamos nuestra aplicaci\u00f3n e importamos nuestro CSS. Vite es una herramienta que ayuda en el desarrollo de JavaScript y CSS permitiendo a los desarrolladores ver los cambios en el frontend sin tener que actualizar la p\u00e1gina durante el desarrollo local.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> como el \u00faltimo elemento de tus middlewares web:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Lado del Cliente<\/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>, y le decimos que resuelva nuestros componentes desde el directorio .\/Pages\/$name.vue<\/strong>. Esto se debe a que guardaremos nuestros componentes Inertia en este directorio m\u00e1s adelante en nuestro proyecto, y este plugin nos ayudar\u00e1 a cargar autom\u00e1ticamente esos componentes desde el directorio correcto.<\/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>\nCrear p\u00e1ginas de Inertia<\/h2>\n
<template><\/code> y todo lo relacionado con JavaScript se envolver\u00e1 con etiquetas <script><\/code>.<\/p>\n<html><\/code>, <head><\/code> y <body><\/code> porque ya est\u00e1n incluidas en el componente ra\u00edz principal de blade.<\/p>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Welcome to Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\nmain<\/code> con un <slot \/><\/code> para permitir que todos los componentes envueltos con este dise\u00f1o se incrusten dentro de \u00e9l. Este archivo deber\u00eda tener el siguiente aspecto :<\/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>\nRutas Laravel e Inertia Render<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse App\\Models\\Article;\nuse Illuminate\\Database\\Seeder;\n\nclass DatabaseSeeder extends Seeder\n{\n public function run()\n {\n Article::factory(10)->create();\n }\n}<\/code><\/pre>\nphp artisan migrate:fresh --seed<\/code><\/pre>\n<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');<\/code><\/pre>\nInertia<\/code> y no hemos utilizado el ayudante de Laravel view()<\/code> para devolver la vista, sino que hemos utilizado Inertia::render<\/code>. Inertia tambi\u00e9n buscar\u00e1 por defecto el nombre de archivo que mencionamos en nuestra ruta en la carpeta Pages<\/strong> en \u00abresources\/js\u00bb.<\/p>\nv-for<\/code> para mostrar los resultados. Entre las etiquetas script, define los datos pasados como prop. Todo lo que Inertia necesita saber es qu\u00e9 tipo de datos esperas, que en nuestro caso es un objeto \u00abarticles\u00bb que contiene una matriz de art\u00edculos.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> para la API de composici\u00f3n de Vue.js 3. Si utiliz\u00e1ramos la API de opciones, tendr\u00edamos que devolverla.<\/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> (d\u00e9jalo en ejecuci\u00f3n porque estamos utilizando Vite) y php artisan serve<\/code> para iniciar el servidor de desarrollo laravel y acceder a nuestro sitio web, veremos la p\u00e1gina esperada mostrando los diez art\u00edculos de la base de datos.<\/p>\n![\"Inspeccionando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Uso de Tailwind CSS con 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![\"Renderizando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Enlaces de 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>. Hemos mencionado en la introducci\u00f3n que Inertia utiliza <Link><\/code> como envoltorio de una etiqueta de anclaje est\u00e1ndar <a><\/code>, y que este envoltorio est\u00e1 pensado para que las visitas a la p\u00e1gina sean lo m\u00e1s fluidas posible. En Inertia, la etiqueta <Link><\/code> puede comportarse como una etiqueta de anclaje que realiza peticiones <GET><\/code>, pero tambi\u00e9n puede actuar como una <button><\/code> y una <form><\/code> al mismo tiempo. Veamos c\u00f3mo podemos aplicarlo a nuestro proyecto.<\/p>\n<Link><\/code> de Inertia, y eliminaremos las etiquetas de anclaje <a><\/code> y las sustituiremos por etiquetas <Link><\/code> de Inertia. El atributo href<\/code> se establecer\u00e1 en la URL de la ruta que hicimos anteriormente para ver el art\u00edculo:<\/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![\"Enlaces](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> como etiqueta de anclaje que env\u00eda una petici\u00f3n GET<\/code> a la ruta y devuelve los nuevos datos, pero podemos utilizar <Link><\/code> para tambi\u00e9n POST<\/code>, PUT<\/code>, PATCH<\/code> y DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nTrucos y consejos de Laravel Inertia que debes conocer<\/h2>\n
Generar URLs<\/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 \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>\nIndicadores de progreso<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n