FLUJO COMPLETO DE UN COMPONENTE VUE EN LARAVEL-solo vue

Imagina que es como una cadena de montaje:

text
1. CREAS → 2. REGISTRAS → 3. USAS → 4. VES

📦 PASO 1: CREAR el Componente

Ubicación: resources/js/Components/

Aquí creas el archivo .vue con todo su código (HTML, CSS, JavaScript).

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

<template>
    <div class="tarjeta">
        <h3>{{ titulo }}</h3>
        <p>{{ contenido }}</p>
    </div>
</template>

<script>
export default {
    name: 'MiTarjeta',  // ← Este nombre es importante
    props: ['titulo', 'contenido']
}
</script>

📋 PASO 2: REGISTRAR el Componente

Ubicación: resources/js/app.js

Aquí le dices a Vue: "Oye, quiero que este componente esté disponible en toda la aplicación".

Forma 1: Registro Global (La que usamos)

javascript
// 📁 resources/js/app.js

import './bootstrap';
import { createApp } from 'vue';
import MiTarjeta from './Components/MiTarjeta.vue';  // ← Importas

const app = createApp({});

app.component('mi-tarjeta', MiTarjeta);  // ← Registras con un nombre

app.mount('#app');

¿Qué significa app.component('mi-tarjeta', MiTarjeta)?

  • 'mi-tarjeta' = El nombre que usarás en el HTML (siempre en kebab-case)

  • MiTarjeta = El componente que importaste

Forma 2: Registro Local (En un componente específico)

vue
<template>
    <div>
        <!-- Usas el componente -->
        <MiTarjeta titulo="Hola" contenido="Mundo" />
    </div>
</template>

<script>
import MiTarjeta from './Components/MiTarjeta.vue';  // ← Importas

export default {
    components: {
        MiTarjeta  // ← Registras solo para este componente
    }
}
</script>

🏠 PASO 3: USAR el Componente

Ubicación: resources/views/*.blade.php

Aquí pones el componente en tu HTML.

blade
{{-- 📁 resources/views/mi-pagina.blade.php --}}

<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        {{-- ¡Aquí usas el componente! --}}
        <mi-tarjeta 
            titulo="Mi primera tarjeta" 
            contenido="Este es el contenido de la tarjeta"
        ></mi-tarjeta>
    </div>
    
    @vite('resources/js/app.js')
</body>
</html>

🌐 PASO 4: VER el Resultado

Ubicación: Navegador

Cuando abres http://localhost:8000/mi-pagina, ves:

text
┌─────────────────────┐
│  Mi primera tarjeta  │
│  Este es el conteni- │
│  do de la tarjeta    │
└─────────────────────┘

🎯 EJEMPLO PRÁCTICO COMPLETO

Escenario: Quieres crear un contador

1. CREAS el componente

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

<template>
    <div class="contador">
        <h2>Contador: {{ contador }}</h2>
        <button @click="incrementar">+1</button>
        <button @click="decrementar">-1</button>
    </div>
</template>

<script>
export default {
    name: 'Contador',
    data() {
        return {
            contador: 0
        }
    },
    methods: {
        incrementar() {
            this.contador++;
        },
        decrementar() {
            this.contador--;
        }
    }
}
</script>

2. REGISTRAS en app.js

javascript
// 📁 resources/js/app.js

import './bootstrap';
import { createApp } from 'vue';
import Contador from './Components/Contador.vue';  // ← Importas

const app = createApp({});

app.component('mi-contador', Contador);  // ← Registras

app.mount('#app');

3. USAS en Blade

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

<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        {{-- Usas el componente --}}
        <mi-contador></mi-contador>
    </div>
    
    @vite('resources/js/app.js')
</body>
</html>

4. CREAS la RUTA

php
// 📁 routes/web.php

Route::get('/contador', function () {
    return view('contador');
});

5. VES el Resultado

text
┌─────────────────────┐
│  Contador: 0         │
│  [+1]  [-1]          │
└─────────────────────┘

¡Y cada vez que haces clic, el número cambia!

📊 DIAGRAMA DEL FLUJO

text
┌─────────────────────────────────────────────────────────────────┐
│                           TU PROYECTO                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. 📁 resources/js/Components/Contador.vue                    │
│     ┌─────────────────────────────────┐                        │
│     │  <template>                     │                        │
│     │    <h2>Contador: 0</h2>        │                        │
│     │    <button>+1</button>         │                        │
│     │  </template>                   │                        │
│     └─────────────────────────────────┘                        │
│                      │                                          │
│                      ▼                                          │
│  2. 📁 resources/js/app.js                                     │
│     ┌─────────────────────────────────┐                        │
│     │  import Contador from './...'   │                        │
│     │  app.component('contador', ...) │  ← REGISTRAS          │
│     │  app.mount('#app')              │                        │
│     └─────────────────────────────────┘                        │
│                      │                                          │
│                      ▼                                          │
│  3. 📁 resources/views/contador.blade.php                     │
│     ┌─────────────────────────────────┐                        │
│     │  <div id="app">                 │                        │
│     │    <contador></contador>        │  ← USAS                │
│     │  </div>                         │                        │
│     │  @vite('resources/js/app.js')   │                        │
│     └─────────────────────────────────┘                        │
│                      │                                          │
│                      ▼                                          │
│  4. 🌐 Navegador en http://localhost:8000/contador            │
│     ┌─────────────────────────────────┐                        │
│     │  Contador: 0                    │  ← VES                │
│     │  [+1]  [-1]                     │                        │
│     └─────────────────────────────────┘                        │
└─────────────────────────────────────────────────────────────────┘

🔑 REGLA DE ORO

PasoAcciónUbicación
1CREAR el componenteresources/js/Components/
2REGISTRAR en Vueresources/js/app.js
3USAR en el HTMLresources/views/*.blade.php
4VER el resultadoNavegador

💡 EJEMPLO CON TUS TAREAS DE 2 COLUMNAS

1. CREAS TaskList.vue

vue
<!-- resources/js/Components/TaskList.vue -->
<template>
    <div class="grid grid-cols-2 gap-4">
        <div v-for="tarea in tareas" :key="tarea.id">
            ✅ {{ tarea.titulo }}
        </div>
    </div>
</template>

<script>
export default {
    props: ['tareas']
}
</script>

2. REGISTRAS en app.js

javascript
import TaskList from './Components/TaskList.vue';
app.component('task-list', TaskList);

3. USAS en Blade

blade
<div id="app">
    <task-list :tareas='@json($tareas)'></task-list>
</div>

4. VES el resultado

text
┌───────────┬───────────┐
│ ✅ Tarea 1 │ ✅ Tarea 2 │
├───────────┼───────────┤
│ ✅ Tarea 3 │ ✅ Tarea 4 │
└───────────┴───────────┘

❓ PREGUNTAS FRECUENTES

¿Por qué registrarlo en app.js?

Porque app.js es el punto de entrada de Vue. Todo lo que registres aquí estará disponible en toda la aplicación.

¿Puedo tener muchos componentes?

¡Sí! Puedes tener cientos. Solo importas y registras cada uno:

javascript
import Componente1 from './Components/Componente1.vue';
import Componente2 from './Components/Componente2.vue';
import Componente3 from './Components/Componente3.vue';

app.component('componente-1', Componente1);
app.component('componente-2', Componente2);
app.component('componente-3', Componente3);

¿Puedo usar un componente dentro de otro?

¡Sí! Eso se llama composición. Puedes tener componentes anidados:

vue
<!-- TarjetaPadre.vue -->
<template>
    <div>
        <TarjetaHija mensaje="Hola" />
    </div>
</template>

<script>
import TarjetaHija from './TarjetaHija.vue';

export default {
    components: {
        TarjetaHija
    }
}
</script>

¿Por qué no veo los cambios?

  1. Asegúrate que npm run dev esté corriendo

  2. Recarga con Ctrl + Shift + R

  3. Si sigue, presiona r + Enter en la terminal de npm

🎯 RESUMEN VISUAL

text
                    CREAS
                      ↓
    ┌─────────────────────────────────┐
    │  resources/js/Components/       │
    │  ┌───────────────────────────┐  │
    │  │  MiComponente.vue         │  │
    │  │  <template>               │  │
    │  │    Hola mundo             │  │
    │  │  </template>              │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘
                      ↓
                   REGISTRAS
                      ↓
    ┌─────────────────────────────────┐
    │  resources/js/app.js            │
    │  ┌───────────────────────────┐  │
    │  │  import MiComponente      │  │
    │  │  app.component('mi-',...) │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘
                      ↓
                    USAS
                      ↓
    ┌─────────────────────────────────┐
    │  resources/views/               │
    │  ┌───────────────────────────┐  │
    │  │  <div id="app">           │  │
    │  │    <mi-componente />      │  │
    │  │  </div>                   │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘
                      ↓
                    VES
                      ↓
    ┌─────────────────────────────────┐
    │  🌐 Navegador                   │
    │  ┌───────────────────────────┐  │
    │  │  Hola mundo               │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘

¿Te queda claro el flujo? ¡Pregúntame si tienes 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