Componente de listado para nuestra app en Vue 3: Estructura base - 13

▶

Ya cumplimos con la fase introductoria, es decir, presentamos algunas cositas que vamos a utilizar: configuraciones en CodeIgniter 4, la creación de la aplicación en Vue, conocer un poquito su ecosistema, cómo realizar peticiones, cómo está formado un componente... Todo eso ya lo vimos antes.

Sé que fue un poquito abstracto porque no pasamos directamente a la implementación, pero aún así eso está ahí. La idea es que, si hay algún tema que no comprendes —por ejemplo, algo específico en Vue— puedes regresar a las clases anteriores, donde expliqué un poco sobre Vue y el uso de sus componentes. Ten presente que esas clases siempre estarán disponibles para consultarlas cuando las necesites.

Creación del primer componente en Vue

Ahora sí, vamos a crear nuestro primer componente en Vue. En este caso, será el componente de estado, que prácticamente nos está gritando que lo creemos.

Dentro de la carpeta components, voy a crear una carpeta adicional para las películas. Creo que, al menos por ahora, solo trabajaremos con películas. Entonces, crearé una carpeta CRUD, y dentro de ella Movies. A partir de ahí, crearé el componente y lo llamaré ListComponent.vue. Me gusta siempre colocar “Component” en el nombre, para saber que es un componente.

Ruta del componente:

src/components/CRUD/Movies/ListComponent.vue

Este componente consta de tres elementos: el template, el script y el style. El style es bastante opcional; al menos yo no suelo definirlo mucho, ya que utilizo un estilo global, que me parece mucho más cómodo.

Aquí colocamos el bloque de datos:

<template>
    
</template>
<script>
export default {
    
    data() {
        return {
            movies: []
        }
    },
}
</script>
<style>
</style>

Snippets, API Options vs Composition y preferencias

Recuerda que, como mencioné antes, me voy a apoyar bastante en los snippets. Tengo estas dos extensiones que me ayudan mucho. Vamos a requerir una variable llamada movies, que nos permitirá iterar aquí.

Este es un punto importante: la sintaxis puede variar. Actualmente, Vue promueve el uso de la Composition API, pero aquí estamos usando la Options API. Esto también lo puedes ver en la documentación oficial. No quiero hacer mucho énfasis en eso, simplemente lo menciono porque, por defecto, Vue se encuentra configurado con Composition API.

Personalmente, yo me siento más cómodo con Options API. Entiendo que Composition es más expresiva, pero a mí me resulta incómodo ver tantas cosas definidas al mismo nivel. Me choca un poco visualmente. Por eso prefiero Options API, ya que me parece más estructurada. Aunque la sintaxis sea más larga, me parece más clara. Pero eso ya es cuestión de gustos.

Ejecutar lógica al montar el componente

Una diferencia importante es que aquí vamos a requerir algún método que se ejecute cuando el componente se monte. De momento, no lo tenemos, ya que antes todo se ejecutaba en el script, un poco más desorganizado, como comenté. Pero ahora no será así. Ya vamos a ver cómo se hace.

Integración del componente en App.vue

Como te comentaba, este va a ser nuestro componente de arranque:

<script setup>
import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';
</script>


<template>
  <ListComponent />
</template>

Limpieza del archivo, importación y estructura básica

Voy a dejar solo un import para comparar rápidamente. El resto lo voy a quitar. También elimino los estilos, ya que no los voy a utilizar.

Ahora, vamos a importar el componente que acabamos de crear. Si te funciona la autoayuda, excelente. Colocamos:

import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';

Fíjate que ya lo toma. Aquí utilizamos el símbolo @, que funciona como un acceso directo a la carpeta src. Esto lo puedes ver en la configuración, pero generalmente no hace falta modificarlo. A partir de ahí, busca en components/CRUD/Movies.

Nota: Ten en cuenta que hay que colocar la extensión .vue. En una etapa anterior de Vue, a veces funcionaba sin la extensión, pero con actualizaciones recientes ya es obligatorio.

Agregando el contenido base y visualización

Aquí simplemente lo empleamos. Tenemos dos sintaxis posibles (aunque esta que ves aquí no es correcta, creo que Copilot se fue de largo). Vamos a colocarlo así correctamente. Por ahora, voy a colocar cualquier cosa en el template, solo para validar que funciona:

<h1>Hola, componente listo</h1>

Aún veo que la pantalla se queda en negro. No sé de dónde está tomando ese estilo, pero lo revisaré. Tal vez se instaló algo en modo debug, no lo había visto antes. Aun así, no afecta el ejemplo.

Podemos ver que está funcionando correctamente. Y la ventaja de los componentes es que los podemos usar tantas veces como queramos. Aunque, en este caso, no tendría mucho sentido ya que es un listado, y usualmente se muestra una sola vez.

De todos modos, mira qué bonito: ahora Vue te dice directamente cuál es el componente y todo.

Alternativa de uso en App.vue
Otra forma de cargarlos es utilizando la notación en minúsculas:

src/App.vue

<template>
  <!-- <ListComponent /> -->
  <!-- <list-component />
  <list-component>
  </list-component> -->
</template>