Instalación y Configuración de Inertia.js con Laravel y Jetstream

 

 Instalación y Configuración de Inertia.js con Laravel y Jetstream

Introducción

En este tutorial aprenderemos a instalar y configurar Inertia.js en un proyecto Laravel, utilizando Jetstream como sistema de autenticación. Inertia nos permite construir aplicaciones de una sola página (SPA) utilizando Vue.js, manteniendo el enrutamiento y controladores de Laravel.

1. Creación del Proyecto Laravel

Primero, creamos un nuevo proyecto Laravel:

bash
composer create-project laravel/laravel inertia-example

Accedemos al directorio del proyecto:

bash
cd inertia-example

2. Instalación de Laravel Jetstream con Inertia

Instalamos Jetstream con soporte para Inertia:

bash
composer require laravel/jetstream

Luego, instalamos Jetstream específicamente con Inertia:

bash
php artisan jetstream:install inertia

Este comando instalará y configurará:

  • Vue.js como framework frontend

  • Tailwind CSS

  • Sistema de autenticación completo

  • Estructura de componentes Vue

3. Configuración de la Base de Datos

Creamos una base de datos para el proyecto. En este ejemplo, la llamaremos inertia-example.

Configuramos el archivo .env con nuestras credenciales:

text
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=inertia-example
DB_USERNAME=root
DB_PASSWORD=

Ejecutamos las migraciones para crear las tablas necesarias:

bash
php artisan migrate

4. Instalación de Dependencias Frontend

Instalamos las dependencias de Node.js:

bash
npm install

Para desarrollo, ejecutamos el servidor de Vite:

bash
npm run dev

Nota: Este comando mantiene activa la compilación de assets y detecta cambios automáticamente.

5. Estructura del Proyecto con Inertia

5.1. Archivo de Entrada: resources/js/app.js

Este archivo es el punto de entrada de la aplicación Vue:

javascript
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

createInertiaApp({
    resolve: (name) => resolvePageComponent(
        `./Pages/${name}.vue`,
        import.meta.glob('./Pages/**/*.vue')
    ),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

5.2. Directorios Importantes

  • resources/js/Pages/: Componentes Vue que se renderizan como páginas completas

  • resources/js/Components/: Componentes Vue reutilizables

  • resources/js/Layouts/: Layouts para las páginas

6. Creando Nuestro Primer Componente con Inertia

6.1. Crear un Controlador

Generamos un controlador para manejar nuestra página:

bash
php artisan make:controller ExampleController

6.2. Definir la Ruta

En routes/web.php:

php
use App\Http\Controllers\ExampleController;

Route::get('/example', [ExampleController::class, 'index'])->name('example');

6.3. Implementar el Controlador

En app/Http/Controllers/ExampleController.php:

php
<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class ExampleController extends Controller
{
    public function index()
    {
        return Inertia::render('ExampleInertia');
    }
}

Importante: En lugar de view(), usamos Inertia::render() para renderizar componentes Vue.

6.4. Crear el Componente Vue

Creamos el archivo resources/js/Pages/ExampleInertia.vue:

vue
<template>
    <div>
        <h1>Hello World</h1>
    </div>
</template>

<script setup>
// Lógica del componente
</script>

<style scoped>
/* Estilos específicos del componente */
</style>

6.5. Compilar los Assets

Asegurémonos de que npm run dev esté ejecutándose. Si no, lo iniciamos:

bash
npm run dev

Ahora podemos acceder a http://localhost:8000/example y ver nuestro "Hello World".

7. Entendiendo el Flujo de Inertia

7.1. Flujo de Trabajo

  1. Ruta Laravel → Define la URL

  2. Controlador → Procesa la lógica y retorna Inertia::render()

  3. Componente Vue → Se renderiza en el navegador

  4. Vite → Compila y sirve los assets de Vue

7.2. Diferencia entre Vista Blade y Componente Inertia

Blade tradicional:

php
return view('welcome');

Inertia:

php
return Inertia::render('Welcome');

7.3. Ubicación Correcta de Componentes

  • Los componentes renderizados por rutas deben estar en Pages/

  • Los componentes reutilizables deben estar en Components/

8. Reactividad en Vue con Inertia

8.1. Ejemplo de Contador Reactivo

Modificamos ExampleInertia.vue:

vue
<template>
    <div>
        <h1>Hello World</h1>
        <p>Contador: {{ counter }}</p>
        <button @click="increment">Incrementar</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const counter = ref(0)

const increment = () => {
    counter.value++
}
</script>

<style scoped>
h1 {
    color: #3490dc;
}
button {
    background-color: #3490dc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>

8.2. Explicación

  • ref(0) crea una variable reactiva

  • counter.value accede al valor

  • @click es el evento de Vue para manejar clics

  • La reactividad funciona sin recargar la página

9. Navegación con Inertia

9.1. Importar el Componente Link

vue
<template>
    <div>
        <h1>Hello World</h1>
        <Link :href="route('login')">Ir a Login</Link>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import { ref } from 'vue'

const counter = ref(0)
// ...
</script>

9.2. Uso del Componente Link

vue
<Link :href="route('login')">Login</Link>
<Link :href="route('register')">Registro</Link>
<Link :href="route('dashboard')">Dashboard</Link>

9.3. Ventajas del Componente Link

  • Navegación sin recarga completa de página

  • Transiciones suaves

  • Mantiene el estado de la aplicación

  • Compatible con las rutas nombradas de Laravel

10. Pasando Datos del Controlador al Componente

10.1. En el Controlador

php
public function index()
{
    return Inertia::render('ExampleInertia', [
        'user' => auth()->user(),
        'posts' => Post::all(),
    ]);
}

10.2. En el Componente Vue

vue
<script setup>
defineProps({
    user: Object,
    posts: Array
})
</script>

10.3. Usando los Props

vue
<template>
    <div>
        <h1>Hola, {{ user.name }}</h1>
        <ul>
            <li v-for="post in posts" :key="post.id">
                {{ post.title }}
            </li>
        </ul>
    </div>
</template>

11. Instalación de Inertia sin Jetstream

Si no deseas usar Jetstream, puedes instalar Inertia de forma pura:

bash
composer require inertiajs/inertia-laravel

Luego, publica la configuración:

bash
php artisan vendor:publish --provider="Inertia\ServiceProvider"

12. Comandos de Compilación

12.1. Desarrollo

bash
npm run dev

  • Compila los assets en modo desarrollo

  • Detecta cambios automáticamente

  • Ideal para desarrollo local

12.2. Producción

bash
npm run build

  • Compila los assets optimizados para producción

  • Minifica el código

  • Genera archivos estáticos

13. Resumen del Flujo de Trabajo

  1. Crear ruta en routes/web.php

  2. Crear controlador con Inertia::render()

  3. Crear componente Vue en resources/js/Pages/

  4. Ejecutar npm run dev para compilar

  5. Acceder a la URL desde el navegador

14. Buenas Prácticas

14.1. Nomenclatura

  • Usar PascalCase para componentes Vue (ej: ExampleInertia.vue)

  • Mantener los componentes de página en Pages/

  • Usar componentes reutilizables en Components/

14.2. Estructura

text
resources/js/
├── Components/        # Componentes reutilizables
│   ├── Button.vue
│   └── Card.vue
├── Layouts/          # Layouts de página
│   └── AppLayout.vue
├── Pages/            # Páginas completas
│   ├── Dashboard.vue
│   ├── ExampleInertia.vue
│   └── Welcome.vue
└── app.js            # Punto de entrada

14.3. Props con Tipado

vue
<script setup>
defineProps({
    user: {
        type: Object,
        required: true
    },
    posts: {
        type: Array,
        default: () => []
    }
})
</script>

15. Conclusión

Hemos aprendido:

  • ✅ Instalar Inertia en Laravel con Jetstream

  • ✅ Configurar la base de datos

  • ✅ Crear rutas y controladores con Inertia

  • ✅ Renderizar componentes Vue como páginas

  • ✅ Trabajar con reactividad en Vue

  • ✅ Navegar entre páginas con el componente Link

  • ✅ Pasar datos del controlador al componente

Inertia combina lo mejor de Laravel (backend) con lo mejor de Vue (frontend), permitiéndonos construir aplicaciones modernas y reactivas sin la complejidad de una API separada.

Recursos Adicionales

¡Ya tienes todo lo necesario para comenzar a desarrollar con Inertia en Laravel! 🚀

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tareas con Laravel + Inertia + Jetstream

  Tareas con Laravel + Inertia + Jetstream 📋 Descripción del Proyecto Aplicación ultra simple de tareas: ✅ Agregar una tarea ✅ Ver una tarea guardada ✅ Almacenar en arreglo (sesión) ❌ Sin listas largas, sin editar, sin eliminar 🚀 1. INSTALACIÓN (PASO A PASO) 1.1 Crear proyecto bash # Crear proyecto Laravel 10 (compatible con PHP 8.0+) composer create-project laravel/laravel:^10.0 tareas-app composer create-project laravel/laravel tareas-app cd tareas-app 1.2 Instalar Jetstream con Inertia bash # Instalar Jetstream composer require laravel/jetstream # Instalar Jetstream con Inertia (sin equipos) php artisan jetstream:install inertia 1.3 Instalar dependencias frontend bash # Instalar paquetes NPM npm install # Compilar assets npm run build 1.4 Configurar entorno bash # Crear archivo .env cp .env.example .env copy .env.example .env # Generar clave php artisan key:generate # Configurar base de datos SQLite touch database/database.sqlite type nul > databas...
Leer más

HACER CAMBIOS-A TU EJEMPLO

  ¡Excelente! Ahora que ya ves los cambios, te daré un tutorial completo sobre la estructura y flujo de trabajo con Laravel Jetstream + Inertia + Vue. 📚 Tutorial: Laravel Jetstream con Inertia + Vue 1. Estructura del Proyecto (Parte Frontend) text resources/ ├── js/ │ ├── Components/ # Componentes Vue reutilizables │ │ ├── ApplicationLogo.vue │ │ ├── InputLabel.vue │ │ ├── Modal.vue │ │ ├── NavLink.vue │ │ └── ... │ ├── Layouts/ # Layouts de la aplicación │ │ └── AppLayout.vue # Layout principal (con navbar, sidebar) │ ├── Pages/ # PÁGINAS (rutas principales) │ │ ├── Welcome.vue # Página de inicio (/) │ │ ├── Dashboard.vue # Dashboard después de login │ │ ├── Auth/ # Páginas de autenticación │ │ │ ├── Login.vue │ │ │ ├── Register.vue │ │ │ └── VerifyEmail.vue │ │ └── Profile/ # Perfil de usuario │ │ └── Show.vue │ ├── app.js # Punto de en...
Leer más

HACER CAMBIOS-AL EJEMPLO POR DEFECTO

  Una vez que has configurado tu proyecto con Laravel, Inertia y el Starter Kit elegido, el siguiente paso es entender cómo modificar la página de bienvenida por defecto y empezar a construir tu aplicación. En el ecosistema de Laravel con Inertia, la página de bienvenida ya no es una plantilla Blade tradicional, sino un componente de Vue o React que funciona como el punto de entrada de tu interfaz. Aquí tienes un tutorial paso a paso para hacer tus primeros cambios. 🚀 Entendiendo la Estructura del Proyecto Con el Starter Kit de Laravel (que incluye Vue/React e Inertia), la página de bienvenida que ves al acceder a la raíz de tu proyecto ya no está en resources/views/welcome.blade.php . En su lugar, es un componente de frontend gestionado por Inertia . El punto de entrada del frontend : El archivo resources/js/app.js (o app.ts si usas TypeScript) es donde se configura y arranca la aplicación Inertia . El componente principal : La página de inicio se encuentra en resources/js/Page...
Leer más