Excelente! Ahora veo el problema completo. Estás usando Inertia.js con Vue 3, no una aplicación Vue "estándar". En Inertia, las páginas se resuelven desde ./Pages/ y el layout principal (que incluye la etiqueta <div id="app">) normalmente se define en un layout de Inertia, no en una vista Blade tradicional. Sin embargo, tu vista Blade todavía existe y está intentando montar un componente Vue directamente, pero app.js está configurado para Inertia, no para una app Vue independiente.

El error de "no ver nada" se debe a que app.js monta una aplicación Inertia, pero tu vista Blade no está utilizando el enrutamiento de Inertia; está intentando montar un componente Vue con una prop tareas-iniciales manualmente, pero la aplicación Inertia no conoce ese componente TaskList porque está montando el componente raíz de Inertia (App.vue o el layout).

Solución lógica: dos enfoques

Opción A: Usar Inertia correctamente (recomendado)

En Inertia, las vistas se manejan completamente desde el lado de Vue. Tu vista Blade debe ser reemplazada por un layout de Inertia (normalmente resources/js/Pages/). Pero si quieres mantener la vista Blade, tendrás que configurar Inertia para que renderice una página específica.

Pasos:

  1. Crea un layout base en resources/js/Layouts/AppLayout.vue (o similar) que incluya el <div id="app"> y el contenido principal.

  2. Crea una página Inertia para tus tareas, por ejemplo resources/js/Pages/Tareas/Index.vue, que importe y use el componente TaskList y reciba las props desde el controlador.

  3. En el controlador, en lugar de retornar view('tareas', compact('tareas')), retornas Inertia::render('Tareas/Index', ['tareas' => $tareas]).

  4. Elimina la vista Blade tareas.blade.php y usa el layout de Inertia.

Ventaja: Todo el flujo está en el ecosistema Inertia, sin mezclar Blade con Vue.

Opción B: Usar Vue standalone junto a Inertia (no recomendado, pero posible)

Si prefieres mantener la vista Blade y usar Vue como un componente aislado, debes modificar app.js para que cree una aplicación Vue "normal" y no la de Inertia. Pero como ya tienes Inertia, esto rompería otras funcionalidades.

Solución más limpia (en el contexto de tu proyecto actual): Sigue la Opción A. Es la forma correcta con Inertia.

¿Cómo implementar la Opción A (lógica con Inertia)?

1. Crea el layout base (si no lo tienes)

En resources/js/Layouts/AppLayout.vue:

vue
<template>
    <div id="app">
        <header>
            <!-- navegación global -->
        </header>
        <main>
            <slot /> <!-- aquí se renderizará el contenido de la página -->
        </main>
    </div>
</template>

<script>
export default { name: 'AppLayout' };
</script>

2. Crea la página de tareas

En resources/js/Pages/Tareas/Index.vue:

vue
<template>
    <AppLayout>
        <TaskList :tareas-iniciales="tareas" />
    </AppLayout>
</template>

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

export default {
    components: { AppLayout, TaskList },
    props: ['tareas']
};
</script>

3. En el controlador, usa Inertia

php
use Inertia\Inertia;

public function index()
{
    $tareas = Tarea::all(); // o tu lógica
    return Inertia::render('Tareas/Index', ['tareas' => $tareas]);
}

4. Elimina la vista Blade tareas.blade.php y asegura que la ruta apunte al controlador que retorna Inertia::render.

5. Asegura que el app.js ya está configurado para Inertia (como lo tienes). No necesitas cambiar nada en app.js.

¿Qué pasa con @vite('resources/css/app.css')?

Eso debe ir en el layout Blade principal de Inertia (normalmente resources/views/app.blade.php si usas el starter kit de Inertia). Si no lo tienes, créalo:

blade
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>Mis Tareas</title>
    @vite('resources/css/app.css')
</head>
<body>
    @inertia
    @vite('resources/js/app.js')
</body>
</html>

Luego configura tu archivo config/inertia.php para que use esa vista como layout raíz (por defecto ya lo hace).

Resumen de la lógica con Inertia

ElementoResponsabilidad
Blade raíz (app.blade.php)Contiene <div id="app"> (o @inertia que ya lo incluye) y carga los assets.
Layout Inertia (AppLayout.vue)Envuelve todas las páginas, proporciona estructura común.
Página Inertia (Tareas/Index.vue)Recibe props del controlador y renderiza componentes específicos.
Componente TaskListGestiona la lógica de tareas (CRUD local + comunicación con API).

Conclusión

Para que veas el componente y funcione la lógica, debes adoptar el flujo de Inertia. La lógica de tu componente TaskList ya está bien (agregar, toggle, eliminar, filtrar). Solo necesitas integrarlo en el sistema de páginas de Inertia.

Si tienes dudas de cómo implementar los métodos con Axios en Inertia (puedes usar axios directamente o Inertia.post para formularios), pero dado que son operaciones asíncronas simples, axios es perfecto.

¿Quieres que detalle los pasos para conectar el backend (rutas API y controladores) para que las operaciones de agregar, actualizar y eliminar persistan en la base de datos?

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