Instalación y Configuración de Inertia.js con Laravel y Jetstream app:inertia-example-sql

app:inertia-example-sql

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

• Documentación oficial de Inertia

• Documentación de Laravel Jetstream

• Curso profesional de Vue 3

---

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

Vamos a crear una página de tareas desde cero:

1️⃣ Crear la Migración (La tabla en la base de datos)

bash

php artisan make:model Tarea -m

Esto crea:

• app/Models/Tarea.php (El modelo)

• database/migrations/...create_tareas_table.php (La tabla)

2️⃣ Definir la estructura de la tabla

php

// En el archivo de migración
public function up()
{
    Schema::create('tareas', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained();
        $table->string('titulo');
        $table->text('descripcion')->nullable();
        $table->boolean('completada')->default(false);
        $table->timestamps();
    });
}

3️⃣ Ejecutar la migración

bash

php artisan migrate

4️⃣ Crear el Controlador con recursos

bash

php artisan make:controller TareaController --resource

5️⃣ Definir las Rutas

php

// routes/web.php
Route::middleware(['auth'])->group(function () {
    Route::resource('tareas', TareaController::class);
});

6️⃣ Modificar el Controlador

php

// app/Http/Controllers/TareaController.php

public function index()
{
    $tareas = Tarea::where('user_id', auth()->id())->get();
    return view('tareas', compact('tareas'));
}

public function store(Request $request)
{
    $tarea = Tarea::create([
        'user_id' => auth()->id(),
        'titulo' => $request->titulo,
        'descripcion' => $request->descripcion,
    ]);
    
    return redirect()->route('tareas.index');
}

---

💡 Parte 6: Trucos y Atajos para Principiantes

🔥 Atajos en el Navegador

• Ctrl + Shift + R (Windows) o Cmd + Shift + R (Mac): Recarga forzada

• F12 → Network → Disable cache: Desactiva la caché (útil para desarrollo)

🔧 Comandos Útiles

bash

# Ver todas las rutas disponibles
php artisan route:list

# Crear un controlador con métodos CRUD
php artisan make:controller TareaController --resource

# Crear un modelo con migración y controlador
php artisan make:model Tarea -mcr

# Limpiar la caché
php artisan cache:clear
php artisan config:clear
php artisan view:clear

# Reiniciar Vite (cuando los cambios no se ven)
# En la terminal de npm run dev, presiona: r + Enter

---

📝 Errores Comunes y Soluciones

Problema	Solución
"No se encuentra el componente"	Reinicia npm run dev
Los cambios no se ven	Ctrl+Shift+R (recarga forzada)
Error de puerto ocupado	php artisan serve --port=8001
Error de compilación	npm install y luego npm run dev
Pantalla en blanco	Abre consola (F12) y mira los errores

---

🎓 Parte 7: Ejercicio Práctico

Reto: Crea tu primera página con Vue

1. Crea el controlador:

bash

php artisan make:controller MiPrimeraController

2. En el controlador:

php

// app/Http/Controllers/MiPrimeraController.php

public function index()
{
    return view('mi-primera', [
        'mensaje' => '¡Hola, mundo!',
        'usuario' => auth()->user()
    ]);
}

3. Crea la ruta:

php

// routes/web.php
Route::get('/mi-primera', [MiPrimeraController::class, 'index']);

4. Crea la vista Blade:

blade

{{-- resources/views/mi-primera.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        <mi-componente mensaje="{{ $mensaje }}" :usuario='@json($usuario)'></mi-componente>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

5. Crea el componente Vue:

vue

<!-- resources/js/Components/MiComponente.vue -->
<template>
    <div class="p-12 text-center">
        <h1 class="text-4xl font-bold text-blue-600">{{ mensaje }}</h1>
        <p class="mt-4 text-xl">Bienvenido, {{ usuario?.name || 'Visitante' }}! 🎉</p>
    </div>
</template>

<script>
export default {
    props: ['mensaje', 'usuario']
}
</script>

6. Registra el componente en app.js:

javascript

import MiComponente from './Components/MiComponente.vue';
app.component('mi-componente', MiComponente);

7. ¡Abre tu navegador en http://localhost:8000/mi-primera!

---

✅ Resumen para Principiantes

Concepto	Explicación Simple
Laravel	El "motor" que maneja la lógica y la base de datos
Vue	Lo que ves en el navegador (interfaz)
Breeze	Un proyecto ya empezado con autenticación
Vite	El compilador que actualiza automáticamente
npm run dev	Comando mágico que actualiza todo automáticamente
Pages/	Páginas completas (cada una es una ruta)
Components/	Piezas pequeñas que usas en varias páginas
props	Cómo recibes datos del backend en Vue

---

🚀 ¡Próximos Pasos!

1. Practica: Crea una página con una lista de tareas

2. Experimenta: Agrega un botón para añadir tareas

3. Personaliza: Cambia colores y estilos

4. Comparte: Muestra lo que has creado a alguien

---

🆘 ¿Tienes problemas para ver los cambios?

Método rápido para reiniciar:

bash

# 1. Detén npm run dev (Ctrl+C)
# 2. Limpia la caché
rm -rf node_modules/.vite
# 3. Reinicia
npm run dev
# 4. Recarga el navegador con Ctrl+Shift+R

---

¿Tienes preguntas? Recuerda:

• Google es tu amigo

• La documentación oficial es tu mejor aliada

• Todos los programadores comenzaron donde estás tú

¡Ahora sí, a programar!