vue- Laravel con Inertia.js

 Laravel con Inertia.js, no Vue directamente. ¡Es diferente! Te explico cómo funciona y dónde registrar los componentes.

🔍 PRIMERO: ¿Qué tienes?

Tienes Inertia.js, que es un "puente" entre Laravel y Vue. En lugar de usar app.component() como en Vue puro, Inertia maneja las páginas de forma diferente.

📂 DÓNDE REGISTRAR COMPONENTES CON INERTIA

Opción 1: Registro Global (Recomendado para componentes reutilizables)

javascript
// 📁 resources/js/app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

// 🔥 IMPORTAS TUS COMPONENTES AQUÍ
import TaskList from './Components/TaskList.vue';  // ← AQUÍ
import Boton from './Components/Boton.vue';        // ← Y AQUÍ

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        // 🔥 CREAS LA APP Y REGISTRAS LOS COMPONENTES
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue);
        
        // 🔥 REGISTRAS TUS COMPONENTES GLOBALES AQUÍ
        app.component('task-list', TaskList);   // ← AQUÍ
        app.component('boton', Boton);          // ← Y AQUÍ
        
        return app.mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

📍 Ubicación exacta del código

javascript
createInertiaApp({
    // ... configuración ...
    setup({ el, App, props, plugin }) {
        // 1. Creas la app
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue);
        
        // 2. 🔥 REGISTRAS TUS COMPONENTES AQUÍ (entre .use() y .mount())
        app.component('task-list', TaskList);
        app.component('boton', Boton);
        // ... más componentes
        
        // 3. Montas la app
        return app.mount(el);
    },
});

🎯 EJEMPLO PRÁCTICO COMPLETO

Paso 1: Crear el componente

vue
<!-- 📁 resources/js/Components/TaskList.vue -->

<template>
    <div class="grid grid-cols-2 gap-4">
        <div v-for="tarea in tareas" :key="tarea.id" 
             class="bg-white p-4 rounded shadow">
            ✅ {{ tarea.titulo }}
        </div>
    </div>
</template>

<script setup>
defineProps({
    tareas: Array
});
</script>

Paso 2: Registrar en app.js

javascript
// 📁 resources/js/app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

// 🔥 1. IMPORTAS EL COMPONENTE
import TaskList from './Components/TaskList.vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        // 🔥 2. CREAS LA APP
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue);
        
        // 🔥 3. REGISTRAS EL COMPONENTE (AQUÍ)
        app.component('task-list', TaskList);
        
        // 🔥 4. MONTAS
        return app.mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Paso 3: Usar en una página Blade

blade
{{-- 📁 resources/views/tareas.blade.php --}}

<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        {{-- Usas el componente --}}
        <task-list :tareas='@json($tareas)'></task-list>
    </div>
    
    @vite('resources/js/app.js')
</body>
</html>

🔄 VERSIÓN CORTA (Solo lo que cambias)

javascript
// 📁 resources/js/app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

// ✅ IMPORTA TUS COMPONENTES
import TaskList from './Components/TaskList.vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue);
        
        // ✅ REGISTRA TUS COMPONENTES AQUÍ
        app.component('task-list', TaskList);
        
        return app.mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

🆚 DIFERENCIA ENTRE VUE PURO E INERTIA

Vue Puro (Breeze)Inertia (Jetstream)
app.component('mi', Componente)app.component('mi', Componente)
Se registra en app.jsSe registra en app.js (igual)
Usas en *.blade.phpUsas en *.blade.php (igual)
Diferencias:
Usas @vite('resources/js/app.js')Usas @vite('resources/js/app.js') (igual)
Tienes app.mount('#app')Tienes createInertiaApp()

¡La forma de registrar componentes es EXACTAMENTE LA MISMA!

💡 REGISTRO LOCAL (Dentro de una página)

Si NO quieres que el componente esté disponible globalmente, puedes registrarlo dentro de una página específica:

Opción A: En una página Vue (Sin <script setup>)

vue
<!-- 📁 resources/js/Pages/Dashboard.vue -->

<template>
    <div>
        <TaskList :tareas="tareas" />
    </div>
</template>

<script>
import TaskList from '@/Components/TaskList.vue';

export default {
    components: {
        TaskList  // ← Registro LOCAL
    },
    props: {
        tareas: Array
    }
}
</script>

Opción B: En una página Vue (Con <script setup>)

vue
<!-- 📁 resources/js/Pages/Dashboard.vue -->

<template>
    <div>
        <TaskList :tareas="tareas" />
    </div>
</template>

<script setup>
import TaskList from '@/Components/TaskList.vue';  // ← Solo importar (se registra automáticamente)

defineProps({
    tareas: Array
});
</script>

📁 ESTRUCTURA COMPLETA PARA INERTIA

text
📁 resources/
   📁 js/
      📁 Components/      ← COMPONENTES REUTILIZABLES
      │  📄 TaskList.vue
      │  📄 Boton.vue
      │  📄 Tarjeta.vue
      │
      📁 Pages/          ← PÁGINAS COMPLETAS
      │  📄 Dashboard.vue
      │  📄 Welcome.vue
      │  📄 Profile.vue
      │
      📄 app.js          ← REGISTRO GLOBAL
      📄 bootstrap.js

🎯 RESUMEN PRÁCTICO

¿Dónde registro el componente?

En resources/js/app.js, dentro de setup(), ANTES de app.mount():

javascript
setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(ZiggyVue);
    
    // 🔥 AQUÍ REGISTRAS
    app.component('task-list', TaskList);
    
    return app.mount(el);
}

¿Y si quiero registro local?

En la página Vue donde lo vas a usar:

vue
<script setup>
import TaskList from '@/Components/TaskList.vue';
// ¡Ya está registrado localmente!
</script>

🚀 EJEMPLO DE REGISTRO MÚLTIPLE

javascript
// resources/js/app.js

import TaskList from './Components/TaskList.vue';
import Boton from './Components/Boton.vue';
import Tarjeta from './Components/Tarjeta.vue';
import Modal from './Components/Modal.vue';

setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
        .use(plugin)
        .use(ZiggyVue);
    
    // Registras todos
    app.component('task-list', TaskList);
    app.component('boton', Boton);
    app.component('tarjeta', Tarjeta);
    app.component('modal', Modal);
    
    return app.mount(el);
}

❓ ¿CUÁL USAR?

SituaciónRecomendación
Componente que usas en varias páginasRegistro Global en app.js
Componente que usas solo en UNA páginaRegistro Local en la página
Componente muy genérico (botones, inputs)Registro Global
Componente específico de una secciónRegistro Local

✅ PASOS RÁPIDOS PARA REGISTRAR

bash
# 1. Creas el componente
touch resources/js/Components/MiComponente.vue

# 2. Editas app.js y agregas:
#    import MiComponente from './Components/MiComponente.vue';
#    app.component('mi-componente', MiComponente);

# 3. Usas en Blade:
#    <mi-componente></mi-componente>

# 4. ¡Listo!

¿Te queda claro ahora? Con Inertia es IGUAL que con Vue puro, solo cambia el lugar exacto dentro de app.js. ¡Pregúntame si tienes más dudas

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-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

Laravel + Inertia - ejemplo

  Perfecto! Vamos a construir un ejemplo mínimo y funcional con Laravel + Inertia + Vue 3 . El ejemplo tendrá: Un input para escribir una tarea. Un botón para guardar esa tarea. La tarea se almacenará en sesión (para no complicar con base de datos) y se mostrará debajo. 1. Estructura de archivos que vamos a tocar text routes/web.php → ruta principal app/Http/Controllers/TareaController.php → controlador resources/js/Pages/Tarea.vue → componente Vue (la vista) 2. Ruta y Controlador routes/web.php php <?php use App \ Http \ Controllers \ TareaController ; use Illuminate \ Support \ Facades \ Route ; Route :: get ( '/tarea' , [ TareaController :: class , 'index' ] ) -> name ( 'tarea.index' ) ; Route :: post ( '/tarea' , [ TareaController :: class , 'store' ] ) -> name ( 'tarea.store' ) ; app/Http/Controllers/TareaController.php php <?php namespace App \ Http \ Controllers ; use Illuminate \ Http \ ...
Leer más