Componentes para Vue.js

La base de una aplicación en Vue.js son los componentes. Sin embargo, cuando comenzamos a crear nuestros propios componentes, combinarlos y a usar diferentes componentes dentro de otros nuestra aplicación puede llegar a crecer y terminemos teniendo muchos componentes sin un orden o estructura alguna. En este tutorial aprenderemos algunas técnicas para estructurar y organizar los componentes de nuestra aplicación.

Estructura básica

Al comenzar a trabajar con Vue.js es probable que tengamos una estructura similar a la siguiente:

my-app/
    components/
    App.vue
    main.js

Normalmente lo que solemos hacer es almacenar nuestros componentes en el directorio components. Al comenzar a trabajar con Vue.js es probable que tengamos una estructura similar a la siguiente:

my-app/
    components/
        ServicesList.vue
        ServicesPage.vue
        ServicesMenu.vue
    App.vue
    main.js

Hasta aquí todo bien: tenemos un componente principal App.vue y otros tres componentes que conforman una página de servicios. Pero, ¿Qué sucede cuando inevitablemente tenemos que añadir más componentes o secciones a nuestra aplicación? Probablemente tengamos algo similar a esto:

my-app/
    components/
        ServicesList.vue
        ServicesPage.vue
        ServicesMenu.vue
        ServicesSidebar.vue
        CheckoutPage.vue
        CheckoutList.vue
        AddToCartButton.vue
        SiteHeader.vue
        SiteFooter.vue
        ...
    App.vue
    main.js

Como puedes observar, llega un punto en que nuestro directorio components crece hasta convertirse en una lista infinita y desorganizada de componentes.

La guía de estilo de Vue.js nos sugiere no utilizar una sola palabra para el nombre del componente.

Categorizando componentes

Dentro del directorio components de ejemplo puedes observar que tenemos tres tipo de componentes que pertenecen a una misma categoría: listas (List), páginas (Page) y menú (Menu). Por lo tanto, podríamos crear la siguiente estructura partiendo de la categoría de cada componente:

my-app/ 
    components/
        pages/
            ServicesPage.vue
            CheckoutPage.vue
        lists/
            ServicesList.vue
            CheckoutList.vue 
        ServicesMenu.vue 
        ServicesSidebar.vue 
        AddToCartButton.vue 
        SiteHeader.vue 
        SiteFooter.vue 
       ... 
    App.vue 
    main.js

Sin embargo, observa como tenemos dos componentes adicionales que pertenecen a services: ServicesMenu y ServicesSidebar. Por lo que es momento de preguntarnos, ¿tendría más sentido si tuviéramos un directorio dedicado solo para componentes Services? Podríamos crear un directorio llamado ServicesPage dentro del directorio pages:

my-app/ 
    components/
        pages/
            ServicesPage/
                Index.vue
                ServicesList.vue
                ServicesMenu.vue
                ServicesSidebar.vue 
            CheckoutPage/   
                Index.vue
                CheckoutList.vue  
        AddToCartButton.vue 
        SiteHeader.vue 
        SiteFooter.vue
       ... 
    App.vue 
    main.js

¿Mucho mejor, no? Observa que también hemos agregado un directorio CheckoutPage y hemos renombrado los componentes ServicesPage.vue y CheckoutPage.vue a Index.vue.

Componentes comunes

En nuestro directorio componentes tenemos tres otros componentes: AddToCartButton.vue, SiteHeader.vue y SiteFooter.vue. Veamos a que categoría podrían pertenecer:

  • AddToCartButton.vue es un botón que agrega los productos a una lista.
  • SiteHeader.vue es el encabezado de nuestro sitio.
  • SiteFooter.vue es el footer de nuestro sitio.

Podríamos decir que AddToCartButton pertenece a los formularios de nuestra aplicación y SiteHeader y SiteFooter pertenecen al layout, por lo tanto, podríamos actualizar la estructura de la siguiente manera:

my-app/ 
    components/
        pages/
            ServicesPage/
                Index.vue
                ServicesList.vue
                ServicesMenu.vue
                ServicesSidebar.vue 
            CheckoutPage/   
                Index.vue
                CheckoutList.vue
        forms/  
            AddToCartButton.vue 
        layout/
            SiteHeader.vue 
            SiteFooter.vue
       ... 
    App.vue 
    main.js

Como puedes ver, organizar nuestros componentes y poner algo de orden en nuestros directorios no es nada complicado. Un último cambio que podríamos agregar es reusar los componentes de listas, ya que como puedes observar tenemos dos componentes similares CheckoutList y ServicesList. Podríamos crear un componente List que pertenezca a una categoría común y sea reusado por otros componentes:

my-app/ 
    components/
        pages/
            ServicesPage/
                Index.vue
                ServicesMenu.vue
                ServicesSidebar.vue 
            CheckoutPage/   
                Index.vue
        common/
            AppList.vue
        forms/  
            AddToCartButton.vue 
        layout/
            SiteHeader.vue 
            SiteFooter.vue
       ... 
    App.vue 
    main.js

Observa como ahora tenemos un componente común llamado AppList que reemplaza a los dos componentes anteriores que se repetían.

Si tienes alguna duda puedes dejarla en los comentarios y si te ha gustado este tutorial no olvides compartirlo.

Puedes aprender más sobre Vue.js en nuestro Curso de Vue 2.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

David Palacios

Publicado por:

Neuroscience nerd. No me gusta el small talk ni el ruido. Me gusta JavaScript y Vue. Tratando de aprender más cada día.