Las aplicaciones multipágina (MPA) son cada vez menos populares. Plataformas conocidas como Facebook, Twitter, YouTube, Github y muchas otras ya están utilizando la tecnología de aplicación de página única (SPA).
Esta moderna tecnología permite a los usuarios interactuar con aplicaciones web de forma rápida y responsiva porque todo se representa en el lado del cliente. Sin embargo, esto puede ser una molestia para los desarrolladores que crean aplicaciones renderizadas del lado del servidor utilizando marcos como Laravel o Django.
Afortunadamente, Inertia.js intervino y vino a rescatarnos.
En este artículo, mostraremos cómo usar Inertia.js con Laravel, Vue.js y Tailwind CSS para crear una aplicación web de blogs moderna. También compartiremos cómo hacer que su SPA sea más compatible con SEO, junto con algunos otros consejos.
Si recién estás comenzando con Laravel, te recomendamos leer este artículo primero para estar listo.
¿Por qué SPA?
Antes de preguntar por qué la inercia, primero debemos preguntar: "¿Por qué SPA?"
¿Por qué alguien preferiría aplicaciones renderizadas del lado del cliente a aplicaciones tradicionales del lado del servidor? ¿Qué obliga a un desarrollador de Laravel full-stack a decir adiós a los componentes blade ?
Respuesta corta: porque la velocidad y la capacidad de respuesta son claves para cualquier interacción exitosa del usuario.
En el caso de MPA, el navegador sigue enviando solicitudes al backend y luego realiza una gran cantidad de consultas a la base de datos. Después de que la base de datos y el servidor procesan la consulta y la pasan al navegador, se representa la página.
Pero el SPA es diferente. La aplicación trae todo lo que el usuario necesita directamente a la página, eliminando la necesidad de que el navegador envíe consultas o recargue la página para representar nuevos elementos HTML.
Debido a esta experiencia de usuario única, muchas empresas de renombre claman por convertir sus sitios web en aplicaciones de una sola página.
Dicho esto, crear una aplicación de una sola página es difícil para los desarrolladores de Laravel porque les exige comenzar a usar Vue.js o React en lugar de plantillas Blade, lo que resulta en la pérdida de muchas gemas de Laravel para ahorrar tiempo y esfuerzo.
Sin embargo, ahora que tenemos Inertia.js, todo esto cambia.
¿Por qué elegir Inercia?
Si los desarrolladores de Laravel construyeran Web SPA con Vue antes de Inertia, tendrían que usar Laravel para configurar la API y devolver datos JSON, y luego usar algo como AXIOS para recuperar los datos en el componente Vue. También necesitarían algo como Vue Router para gestionar su enrutamiento, lo que significaría perder el enrutamiento de Laravel, así como el middleware y los controladores.
Inertia.js, por otro lado, permite a los desarrolladores crear aplicaciones Vue, React y Svelte modernas de una sola página utilizando controladores y enrutamiento clásicos del lado del servidor. Inertia está diseñado para desarrolladores de Laravel, Ruby on Rails y Django, lo que les permite crear aplicaciones sin cambiar sus técnicas de codificación para crear controladores, obtener datos de bases de datos y representar vistas.
Los desarrolladores de Laravel se sentirán como en casa gracias a Inertia.js.
Cómo funciona la inercia
Crear un SPA solo con Laravel y Vue le brindará una página JavaScript completa en la interfaz, pero no le brindará una experiencia de aplicación de una sola página. Cada enlace en el que se haga clic hará que el marco del lado del cliente se reinicie en la siguiente carga de la página.
Aquí es donde la inercia entra en escena.
Inertia es básicamente una biblioteca de enrutamiento del lado del cliente. Le permite navegar entre páginas sin recargar la página completa. Esto se <Link> logra a través de componentes, que son envoltorios livianos alrededor de etiquetas de anclaje estándar.
Cuando haces clic en un enlace de Inertia, Inertia intercepta el clic y te redirige a XHR. El navegador no recarga la página de esta manera, lo que brinda al usuario una experiencia completa de una sola página.
Comience con la inercia
Una página de muestra hecha con Inertia.js
Para comprender Inertia y cómo integrarla con Laravel, crearemos una aplicación web de blogs utilizando la combinación más poderosa de Laravel para el backend, Vue.js para la interfaz de JavaScript y Tailwind CSS para el estilo.
Si prefiere seguir este tutorial en un entorno local, puede utilizar DevKinsta , una poderosa herramienta para desarrolladores, diseñadores y agencias que les permite crear aplicaciones web de WordPress de una o varias páginas. Afortunadamente, WordPress se puede integrar fácilmente con Laravel utilizando el paquete Corcel .
Requisitos previos
Para aprovechar al máximo este tutorial, debe estar familiarizado con lo siguiente:
- Conceptos básicos de Laravel (instalación, bases de datos, migraciones de bases de datos, modelos Eloquent, controladores y enrutamiento)
- Conceptos básicos de Vue.js (instalación, estructura y formularios)
Si no estás seguro, consulta estos fantásticos tutoriales gratuitos y de pago en Laravel . De lo contrario, comencemos.
Paso 1: instalar elementos centrales
Para centrarse en Inertia.js y pasar directamente a la parte divertida, asegúrese de tener listas las siguientes configuraciones:
- El proyecto Laravel 9 recién instalado se llama
blog - Instalé Tailwind CSS CLI en nuestro proyecto Laravel
- Los dos componentes Blade en blog/resources/views se utilizan para ver la página de inicio del blog y un artículo en el blog, como se muestra en la siguiente figura: "
/resources/views/index.blade.php ":<!DOCTYPE html> <html lang="{ { str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>博客 - 闪电博</title> </head> <body> <header> <h1>博客 - 闪电博</h1> </header> <main> <h2>Read our latest articles</h2> <section> <article> <div> <img src="/images/wbolt-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html> “/resources/views/show.blade.php“: <!DOCTYPE html> <html lang="{ { str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>博客 - 闪电博</title> </head> <body> <main> <article> <div> <img src="/images/wbolt-logo.png" alt="Article thumbnail" /> </div> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html> blogConecte a nuestro proyecto una base de datos local MySQL llamada: " .env " :DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=blog DB_USERNAME=root DB_PASSWORD=- Modelos de artículos, migraciones y fábricas: "app/Models/ Article.php ".
<?php namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Article extends Model { use HasFactory; protected $fillable = ['title', 'excerpt', 'body']; } “database/migrations/create_articles_table.php“: <?php use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; return new class extends Migration { public function up() { Schema::create('articles', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('excerpt'); $table->text('body'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('articles'); } }; “database/factories/ArticleFactory.php“: <?php namespace DatabaseFactories; use IlluminateDatabaseEloquentFactoriesFactory; class ArticleFactory extends Factory { public function definition() { return [ 'title' => $this->faker->sentence(6), 'excerpt' => $this->faker->paragraph(4), 'body' => $this->faker->paragraph(15), ]; } }
¡Eso es todo lo que necesitamos para comenzar! Ahora vayamos al grano e introduzcamos Inertia.js en nuestro proyecto.
Paso 2: Instalar Inercia
El proceso de instalación de Inertia se divide en dos etapas principales: del lado del servidor (Laravel) y del lado del cliente (VueJs).
La guía de instalación oficial en la documentación de Inertia está un poco desactualizada, ya que Laravel 9 ahora usa Vite por defecto , pero también le echaremos un vistazo.
1. Del lado del servidor
Lo primero que debemos hacer es instalar el adaptador del lado del servidor Inertia a través de Composer usando el siguiente comando de terminal.
composer require inertiajs/inertia-laravelAhora configuraremos nuestra plantilla raíz, que será un archivo blade único que se usará para cargar sus archivos CSS y JS, y una raíz de Inercia que se usará para iniciar nuestra aplicación JavaScript.
Dado que estamos usando la última versión de Laravel 9 v9.3.1, también tenemos que dejar que Vite haga su magia al incluir esto en la etiqueta /resources/views/app.blade.php :
<!DOCTYPE html>
<html lang="{
{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Fetch project name dynamically -->
<title inertia>{
{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
@vite('resources/js/app.js') @inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>Observe cómo obtenemos dinámicamente el título del artículo <title> agregando un atributo a la etiqueta .Inertia
También agregamos @vite directivas en el encabezado para permitirle a Vite saber la ruta al archivo JavaScript principal donde creamos la aplicación e importamos el CSS. Vite es una herramienta que ayuda al desarrollo de JavaScript y CSS, permitiendo a los desarrolladores ver los cambios del front-end durante el desarrollo local sin tener que actualizar la página.
Nuestro siguiente paso será crear el middleware HandleInertiaRequests y publicarlo en nuestro proyecto. Podemos hacer esto emitiendo el siguiente comando de terminal desde el directorio raíz de nuestro proyecto.
php artisan inertia:middlewareUna vez hecho esto, vaya a "App/Http/ Kernel " y registre HandleInertiaRequests como último elemento su middleware web:
'web' => [
// ...
AppHttpMiddlewareHandleInertiaRequests::class,
],2. Del lado del cliente
A continuación, tenemos que instalar nuestras dependencias de Vue.js 3 del front-end de la misma manera que en el lado del servidor:
npm install @inertiajs/inertia @inertiajs/inertia-vue3
// or
yarn add @inertiajs/inertia @inertiajs/inertia-vue3A continuación, debe instalar Vue.js 3:
npm install vue@nextLuego actualice su archivo JavaScript principal para inicializar Inertia.js con Vue.js 3, Vite y Laravel:
“resources/js/app.js“:
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mount(el);
},
});En el fragmento de código anterior, usamos el complemento de Laravel resolvePageComponenty le indicamos que resuelva nuestro componente desde el directorio ./Pages/$name.vue . Esto se debe a que guardaremos nuestros componentes de Inertia en este directorio en proyectos futuros y este complemento nos ayudará a cargar automáticamente estos componentes desde el directorio correcto.
Todo lo que queda es la instalación vitejs/plugin-vue:
npm i @vitejs/plugin-vueY actualice el archivo vite.config.js :
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});El último paso es instalar nuestras dependencias y compilar nuestros archivos.
npm install
npm run dev¡Y eso es todo! Tienes una aplicación Laravel 9 usando Vue.js 3 y Vite. ¡Ahora necesitamos ver que algo realmente suceda!
Crear página de inercia
¿Recuerda los dos archivos Blade ( index y show ) utilizados para ver nuestra página de inicio y un artículo ?
Cuando usamos Inertia, el único archivo blade que necesitamos es app.blade.php , que ya usamos una vez al instalar Inertia. Entonces, ¿qué pasa ahora con estos archivos?
Convertiremos estos archivos de componentes Blade a componentes Inertia.js.
Cada página de su aplicación tiene su propio controlador y componente Inertia JavaScript. Esto le permite obtener solo los datos que necesita para esa página sin tener que utilizar la API. Las páginas de inercia no son más que componentes de JavaScript, en nuestro caso son componentes de Vue.js. No hay nada particularmente digno de mención en ellos. Entonces, lo que vamos a hacer es <template> envolver todo nuestro contenido HTML entre etiquetas, y todo lo que tenga que ver con JavaScript estará <script> envuelto en etiquetas.
Crea una carpeta llamada "Páginas" y mueve tus archivos allí. Por lo tanto, pondremos " index.blade.php " y " show.blade.php " en " ./resources/js/Pages ". Luego cambiaremos el formato del archivo a ".vue" en lugar de ".blade.php", pondremos en mayúscula la primera letra de sus nombres y convertiremos su contenido en un componente Vue.js estándar. Excluiremos las etiquetas y <html>porque ya están incluidas en el componente principal de la hoja raíz.<head><body>
“resources/js/Pages/Index.vue“：
<script setup>
//
</script>
<template>
<header>
<h1>博客 - 闪电博</h1>
</header>
<main>
<h2>Read our latest articles</h2>
<section>
<article>
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>Title for the blog</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem
itaque error vel perferendis aliquam numquam dignissimos, expedita
perspiciatis consectetur!
</p>
<a href="#">Read more</a>
</article>
</section>
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template>
“resources/js/Pages/Show.vue“:
<script setup>
//
</script>
<template>
<header>
<h1>欢迎来到闪电博的博客频道</h1>
</header>
<main>
<article>
<h1>Title for the blog</h1>
<p>Article content goes here</p>
</article>
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template>¡Una cosa realmente me molesta! Hemos estado copiando y pegando nuestros encabezados y pies de página en cada componente, lo cual no es una buena práctica. Constantemente copiamos y pegamos nuestros encabezados y pies de página en cada componente, lo cual no es una muy buena práctica. Creemos un diseño de Inercia básico para almacenar nuestros componentes persistentes.
Cree una carpeta llamada "Layouts" en " /resources/js " y cree un archivo llamado "WboltLayout.vue" en la carpeta. Este archivo tendrá nuestro encabezado y pie de página, así como con <slot /> , main para permitir que todos los componentes incluidos en este diseño se incrusten en él. El archivo debería verse así:
“recursos/js/Layouts/ WboltLayout.vue “:
<script setup></script>
<template>
<header>
<h1>博客 - 闪电博</h1>
</header>
<main>
<slot />
</main>
<footer>
<h2>Join our Newsletter</h2>
<input type="email" />
</footer>
</template>Luego importaremos este nuevo diseño a nuestra página y envolveremos todo el contenido HTML en él. Nuestro componente debería verse así:
Vista.índice :
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
</script>
<template>
<WboltLayout>
<section>
<h2>Read our latest articles</h2>
<article>
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>Title for the blog</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem
itaque error vel perferendis aliquam numquam dignissimos, expedita
perspiciatis consectetur!
</p>
<a href="#">Read more</a>
</article>
</section>
</WboltLayout>
</template>Mostrar.vue :
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
</script>
<template>
<WboltLayout>
<article>
<h1>Title for the blog</h1>
<p>Article content goes here</p>
</article>
</WboltLayout>
</template>Enrutamiento de Laravel y renderizado inercial.
Primero, introduzcamos algunos artículos en nuestra base de datos utilizando el archivo " ArticleFactory " desde el punto de partida de nuestro tutorial .
“base de datos/sembradoras/ base de datosSeeder.php “:
<?php
namespace DatabaseSeeders;
use AppModelsArticle;
use IlluminateDatabaseSeeder;
class DatabaseSeeder extends Seeder
{
public function run()
{
Article::factory(10)->create();
}
}Luego haga clic en el siguiente comando de terminal para migrar sus tablas y generar los datos falsos de fábrica:
php artisan migrate:fresh --seedEsto creará 10 artículos falsos en la base de datos, que necesitaremos usar el enrutamiento Laravel para pasar a nuestra vista. Ahora que usamos Inertia para representar vistas, la forma en que solíamos escribir rutas cambiará ligeramente. Creemos nuestra primera ruta Laravel Inertia en "routes/ web.php " y regresemos a la vista de la página de inicio desde "/resources/js/Pages/Index.vue ".
“rutas/ web.php “:
<?php
use AppModelsArticle;
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Index', [
'articles' => Article::latest()->get()
]);
})->name('home');Tenga en cuenta que importamos Inertia y no utilizamos el asistente view() de Laravel para devolver la vista Inertia::render. Inertia también buscará el nombre de archivo que mencionamos en "resources/js" en la carpeta Páginas de forma predeterminada.
Vaya al archivo de índice y configure los datos recuperados como accesorios para v-for recorrerlos y mostrar los resultados. Entre etiquetas de secuencia de comandos, defina los datos pasados como un accesorio. Todo lo que Inertia necesita saber es el tipo de datos que espera, en nuestro caso un objeto "Artículo" que contiene una serie de artículos.
“recursos/js/Pages/ Index.vue “:
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
Articles: Object,
});
</script>Tenga en cuenta que basta con definirlo como un accesorio sin devolverlo, ya que estamos usando setup el formato de la API de composición Vue.js 3. Si estamos utilizando la API de opciones, entonces debemos devolverla.
Hagamos este bucle:
<template>
<WboltLayout>
<h2>Read our latest articles</h2>
<section>
// Looping over articles
<article v-for="article in articles":key="article.id">
<div>
<img src="/images/wbolt-logo.png" alt="Article thumbnail" />
</div>
<h3>{
{article.title}}</h3>
<p>{
{article.excerpt}}</p>
<a href="#">Read more</a>
</article>
</section>
</WboltLayout>
</template>npm run dev (Déjelo ejecutar ya que estamos usando Vite) y php artisan serve para iniciar el servidor de desarrollo laravel, visite nuestro sitio web y veremos la página esperada que muestra los diez artículos en la base de datos.
En este momento, estamos usando la extensión Vue DevTools para Google Chrome , que nos permite depurar mi aplicación. Echemos un vistazo a cómo se pasan nuestros datos al componente.
Comprueba las propiedades de la inercia.
"Artículos" se pasa al componente como un objeto de accesorios, que contiene una matriz de artículos; cada artículo en la matriz también es un objeto con propiedades correspondientes a los datos que obtuvo de la base de datos. Esto significa cualquier dato que transfiramos de Laravel a Inertia. será tratado como un accesorio.
Integración de Tailwind CSS con Inertia.js
Dado que Tailwind ya está instalado en nuestro proyecto al principio, todo lo que tenemos que hacer es decirle que lea nuestro componente Inertia. Esto se puede lograr editando " tailwind.config.js " de la siguiente manera:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
};Luego, asegúrese de haber importado nuestro archivo CSS en "resources/js/ app.js ":
import "../css/app.css";Ahora estamos listos para diseñar nuestro componente.
“recursos/js/Pages/ Index.vue “:
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
articles: Object,
});
</script>
<template>
<WboltLayout>
<h2 class="text-2xl font-bold py-10">Read our latest articles</h2>
<section class="space-y-5 border-b-2 pb-10">
<article
v-for="article in articles"
:key="article.id"
class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl"
>
<img
src="/images/wbolt-logo.png"
class="w-32 h-32 rounded-xl object-cover"
alt=""
/>
<div class="flex flex-col text-left justify-between pl-3 space-y-5">
<h3
class="text-xl font-semibold text-indigo-600 hover:text-indigo-800"
>
<a href="#">{
{ article.title }}</a>
</h3>
<p>
{
{ article.excerpt }}
</p>
<a
href="#"
class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold"
>Read more</a
>
</div>
</article>
</section>
</WboltLayout>
</template>“recursos/js/Layouts/ WboltLayout.vue “:
<script setup></script>
<template>
<Header
class="bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4"
>
<h1 class="text-white font-bold text-4xl">博客 - 闪电博</h1>
</Header>
<main class="container mx-auto text-center">
<slot />
</main>
<footer
class="bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto"
>
<h2 class="font-bold text-xl pb-5">Join our Newsletter</h2>
<input
class="rounded-xl w-80 h-12 px-3 py-2 shadow-md"
type="email"
placeholder="Write your email.."
/>
</footer>
</template>Si echas un vistazo al navegador, verás que Vite ha actualizado la página con Tailwind Magic.
Propiedades de inercia renderizadas
Enlace de inercia
Ahora que tenemos una página de inicio funcional que muestra todos los artículos de la base de datos, necesitamos crear otra ruta para mostrar artículos individuales. Creemos una nueva ruta y establezcamos la URL con el comodín "id":
“rutas/ web.php ”
<?php
use AppModelsArticle;
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Index', [
'articles' => Article::latest()->get()
]);
})->name('home');
Route::get('/posts/{article:id}', function (Article $article) {
return Inertia::render('Show', [
'article' => $article
]);
})->name('article.show');Importamos el modelo "Artículo" y agregamos una nueva ruta para devolver el componente Inertia Show.vue . También aprovechamos el enlace del modelo de enrutamiento de Laravel , que permite a Laravel recuperar automáticamente el artículo al que nos referimos.
Lo que necesitamos ahora es una forma de acceder a esta ruta haciendo clic en un enlace en la página de inicio sin recargar la página completa. Esto es posible con las increíbles herramientas de Inertia <Link> . Mencionamos en la introducción que Inertia utiliza contenedores <Link> como etiquetas de anclaje estándar que están diseñadas para que el acceso a la página sea lo más fluido posible. <a>En Inertia, <Link>una etiqueta puede actuar como <GET> etiqueta de anclaje para ejecutar solicitudes, pero también puede actuar como <button> ambas <form> . Veamos cómo podemos aplicar esto a nuestro proyecto.
En nuestro Index.vue, importaremos desde Inertia <Link>, eliminaremos la etiqueta de anclaje <a> y la reemplazaremos con <Link> la etiqueta de Inertia. href La propiedad se establecerá en la URL de ruta que creamos anteriormente para ver el artículo:
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
import { Link } from "@inertiajs/inertia-vue3";
defineProps({
articles: Object,
});
</script>
<template>
<WboltLayout>
<section class="space-y-5 border-b-2 pb-10">
<h2 class="text-2xl font-bold pt-10 mx-auto text-center">
Read our latest articles
</h2>
<article
v-for="article in articles"
:key="article.id"
class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl"
>
<img
src="/images/wbolt-logo.png"
class="w-32 h-32 rounded-xl object-cover"
alt=""
/>
<div
class="flex flex-col text-left justify-between pl-3 space-y-5"
>
<h3
class="text-xl font-semibold text-indigo-600 hover:text-indigo-800"
>
<Link :href="'/posts/' + article.id">{
{
article.title
}}</Link>
</h3>
<p>
{
{ article.excerpt }}
</p>
<Link
:href="'/posts/' + article.id"
class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold"
>Read more
</Link>
</div>
</article>
</section>
</WboltLayout>
</template>Usemos Tailwind para diseñar Show.vue para que se vea más limpio y listo para que podamos acceder. También debemos hacerle saber que debe esperar un objeto "Artículo" y configurarlo como accesorio:
<script setup>
import WboltLayout from "../Layouts/WboltLayout.vue";
defineProps({
article: Object,
});
</script>
<template>
<WboltLayout>
<article class="mx-auto mt-10 flex justify-center max-w-5xl border-b-2">
<img
src="/images/wbolt-logo.png"
class="w-80 h-80 rounded-xl mx-auto py-5"
alt=""
/>
<div class="text-left flex flex-col pt-5 pb-10 px-10">
<h1 class="text-xl font-semibold mb-10">{
{ article.title }}</h1>
<p>{
{ article.body }}</p>
</div>
</article>
</WboltLayout>
</template>Ahora, cuando hagamos clic en el título del artículo o en "Leer más", seremos transportados mágicamente a Show.vue sin tener que actualizar la página.
Ejemplo de enlace de inercia
En nuestro ejemplo usamos <Link> como etiqueta de anclaje, enviamos una solicitud a la ruta y devolvemos nuevos datos, pero también GET podríamos <Link> usar POST, PUTy PATCHDELETE
“rutas/ web.php “:
<Link href="/logout" method="post" as="button" type="button">Logout</Link>Consejos y trucos de inercia de integración de Laravel
Ahora tenemos un SPA funcional construido con Laravel, Inertia y Tailwind CSS. Pero la inercia puede ayudarnos a lograr más. Ahora es el momento de dominar algunas técnicas de inercia que ayudarán tanto a los desarrolladores como a los visitantes de la aplicación.
Generar URL
Quizás hayas notado que hemos estado agregando nombres a nuestras rutas de Laravel sin usarlas. La inercia nos permite utilizar nuestras rutas con nombre dentro de los componentes en lugar de escribir rutas completas manualmente.
Podemos lograr esto instalando el paquete Ziggy en nuestro proyecto :
composer require tightenco/ziggyLuego vaya a "resources/js/app.js" y actualícelo así:
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});Vaya a "/resources/views/app.blade.php " y actualice el encabezado con el comando :@route
<!DOCTYPE html>
<html lang="{
{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fetch project name dynamically -->
<title inertia>{
{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
@routes
@vite('resources/js/app.js')
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>…y actualice su paquete NPM haciendo clic en los siguientes dos comandos de terminal:
npm install && npm run devEste paquete nos permite usar rutas con nombre en nuestros componentes de Inertia, así que vayamos a Index.vue y eliminemos la ruta manual anterior, reemplazándola con el nombre de la ruta mientras pasamos los datos normalmente como lo haríamos en el controlador.
Reemplazaremos lo siguiente:
<Link :href="'/posts/' + article.id">
{
{ article.title }}
</Link>...para esto:
<Link :href="route('article.show', article.id)">
{
{ article.title }}
</Link>Esto nos dará exactamente el mismo comportamiento, pero es más amigable para los desarrolladores y es muy útil cuando su ruta espera muchos parámetros.
indicador de barra de progreso
Esta es una de las mejores características de Inertia.js; dado que SPA proporciona una experiencia de usuario interactiva, tener comentarios constantes sobre si una solicitud se está cargando sería una gran adición a la aplicación. Esto se puede lograr a través de una biblioteca separada proporcionada por Inertia.
La biblioteca @inertiajs/progress es un contenedor de NProgress que puede mostrar condicionalmente métricas de carga basadas en eventos de inercia. Realmente no necesitas saber cómo funciona detrás de escena, así que solo necesitamos hacerlo funcionar.
Podemos instalar esta biblioteca usando el siguiente comando de terminal:
npm install @inertiajs/progressUna vez instalado, debemos importarlo en " resources/js/app.js ".
import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import { InertiaProgress } from "@inertiajs/progress";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
InertiaProgress.init({ color: "#000000", showSpinner: true });Esto mostrará una barra de carga negra y una perilla de carga, pero podemos cambiar el color, así como otras opciones útiles, que se pueden encontrar en la documentación del indicador de progreso de Inertia.js .
Indicador de progreso de inercia (arriba a la derecha)
gestión de desplazamiento
En algunos casos, es posible que desee navegar a una nueva página mientras mantiene la posición de desplazamiento. Tal vez necesite hacer esto si permite que los usuarios dejen comentarios; esto enviará un formulario y cargará nuevos comentarios de la base de datos en su componente; desea que esto suceda sin que el usuario pierda su posición de desplazamiento. La inercia nos resuelve este problema.
En nuestro caso, apliquémoslo a la etiqueta en Index.vue<Link> . <Link> Para preservar la posición de desplazamiento al redirigir a una página diferente usando Inertia , todo lo que necesitamos hacer es <Link> agregar preserve-scroll un atributo en .
<Link :href="route('article.show', article.id)" preserve-scroll>
{
{ article.title }}
</Link>Consejos de SEO
Desde el nacimiento de SPA, la gente ha estado prestando atención a las cuestiones de optimización de motores de búsqueda (SEO). En general, se sabe que si utiliza el enfoque SPA, los motores de búsqueda tendrán dificultades para rastrear su aplicación web porque todo se procesa en el lado del cliente, lo que hace que su sitio web no aparezca en la parte superior de los resultados de búsqueda; sin embargo, ¿por qué? ¿Plataformas populares como Facebook y Github ahora son SPA y todavía funcionan bien en términos de SEO?
Bueno, esto ya no es una tarea: imposible. Inertia proporciona algunas soluciones para ayudar a que su SPA sea compatible con los motores de búsqueda.
Inercia Vue SSR para Laravel y Vite
Los motores de búsqueda siempre buscan HTML en su sitio web para identificar el contenido; sin embargo, si no hay HTML en su URL, el trabajo se vuelve más difícil. Al desarrollar un SPA, solo tienes JavaScript y JSON en tus páginas. Inertia presenta una función de renderizado del lado del servidor (SSR) que puede agregar a su aplicación. Esto permite que su aplicación pre-renderice una visita a la página inicial en el servidor y luego envíe el HTML renderizado al navegador. Esto permite a los usuarios ver e interactuar con su página antes de que esté completamente cargada y tiene otros beneficios, como acortar el tiempo que tardan los motores de búsqueda en indexar su sitio.
Para resumir cómo funciona, Inertia reconocerá si se está ejecutando en un servidor Node.js y representará el nombre del componente, las propiedades, la URL y la versión del activo en HTML. Esto proporcionará a los usuarios y motores de búsqueda casi todo lo que su página tiene para ofrecer.
Sin embargo, dado que estamos tratando con Laravel, esto no tiene mucho sentido, ya que Laravel es un framework PHP y no se ejecuta en un servidor Node.js. Por lo tanto, reenviaremos la solicitud a un servicio Node.js, que renderice la página y devuelva el HTML. Esto hará que nuestra aplicación Laravel Vue sea compatible con SEO de forma predeterminada.
Primero, necesitamos instalar el paquete npm Vue.js SSR:
npm install @vue/server-rendererOtro paquete útil de Inertia "NPM" proporciona un servidor "HTTP" simple. Le recomendamos encarecidamente que lo instale:
npm install @inertiajs/serverLuego, en "resources/js/" agregaremos un nuevo archivo llamado ssr.js. Este archivo será muy similar al archivo app.js que creamos al instalar Inertia , excepto que se ejecutará en Node.js en lugar del navegador:
import { createSSRApp, h } from "vue";
import { renderToString } from "@vue/server-renderer";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import createServer from "@inertiajs/server";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
const appName = "Laravel";
createServer((page) =>
createInertiaApp({
page,
render: renderToString,
title: (title) => `${title} - ${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob("./Pages/**/*.vue")
),
setup({ app, props, plugin }) {
return createSSRApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
},
})
);Asegúrese de no incluir todo en el archivo ssr.js
"De forma predeterminada, el servidor SSR de Inertia se ejecutará en el puerto 13714. Sin embargo, puedes cambiar esto proporcionando un segundo argumento al método createServer." Inertia DOCss.
Los DOC de Inertia.js no explican cómo integrar Inertia SSR con Vite, pero llegaremos a eso ahora. Vaya a vite.config.js y pegue lo siguiente:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: "resources/js/app.js",
ssr: "resources/js/ssr.js",
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});A continuación, vaya a package.json y modifique el script de compilación:
"build": "vite build && vite build --ssr"Ahora, si ejecutamos npm run build, Vite construirá nuestro paquete SSR para producción. Para obtener más información relacionada, puede visitar la documentación de Inertia SSR y la documentación de Vite SSR .
Título y meta
Debido a que las aplicaciones JavaScript se <body> representan dentro del documento, no pueden <head> representar marcas en el documento porque está fuera de su alcance. Inertia tiene un <Head> componente que se puede utilizar para configurar la página <title>, <meta> etiquetas y otros <head> componentes.
<head> Para agregar elementos a tu página , tenemos que importar desde Inertia <head>, tal como lo <Link> hicimos con los componentes:
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>博客 - 闪电博</title>
<meta name="description" content="WordPress爱好者博客">
</Head>También podemos agregar un título global a todas las páginas, lo que agregará el nombre de su aplicación junto al título de cada página. Hemos hecho esto en el archivo app.js :
createInertiaApp({
title: (title) => `${title} - ${appName}`,
//
});Esto significa que si agregamos un título a la página de inicio de nuestra aplicación <head title="Homepage">, ésta se representará así: <title>Home - My App</title>.
Supervise su aplicación
La velocidad es uno de los factores más importantes a la hora de optimizar el rendimiento SEO de su sitio web. Si su sitio web utiliza WordPress, por este motivo, Kinsta APM le ayudará a monitorear y vigilar el funcionamiento de su aplicación y puede ayudarle a identificar problemas de rendimiento de WordPress.
resumen
Inertia.js es una de las tecnologías más importantes que existen; mézclala con Laravel y tendrás una aplicación moderna de una sola página construida con PHP y JavaScript. Taylor Otwell, el creador de Laravel, está muy interesado en Inertia, tanto es así que Laravel lanzó sus kits de inicio más populares, Laravel Breeze y Jetstream, con soporte para Inertia y SSR.
Si eres fanático de Laravel o desarrollador profesional, Inertia.js sin duda te llamará la atención, en este tutorial hicimos un blog muy básico y sencillo en tan solo unos minutos. Todavía hay mucho que aprender sobre Inertia y este puede ser sólo el primero de muchos artículos y tutoriales.