Componentes Layout en Vue con Bulma

Mejora la arquitectura de Platzi Music creando componentes claros y reutilizables. Aquí verás cómo ordenar la carpeta components, usar Bulma para dar estilo, registrar componentes con instalación local y evitar el error de “un solo root”. Además, aplicarás el prefijo PM para identificar componentes custom y buenas prácticas de indentación.

¿Cómo organizar la carpeta components y layout?

Organiza el proyecto para escalar sin complicaciones. La recomendación es poner todos los componentes en una carpeta components y mantener el archivo principal app punto view fuera de esa carpeta. Dentro de components, crea la subcarpeta Layout para elementos estructurales como header, footer o container.

• Crear carpeta components y subcarpeta Layout.
• Mantener app punto view fuera de components.
• Colocar en Layout los componentes de estructura: header, footer, container.
• Seguir la regla de “un archivo, un componente”.

Estructura de archivos:

Components/
  Layout/
    footer.view
    header.view
App.view

¿Cómo crear e inyectar un footer con Bulma?

El footer solo necesita HTML, por lo que puedes omitir script y style. Usa Bulma para estilos rápidos. En el template, elige el lenguaje pack y crea la estructura con clases para centrar contenido y mostrar un mensaje.

• Usar footer con la clase footer de Bulma.
• Añadir un container y un content centrado (clase has text center).
• Escribir un párrafo con un mensaje, por ejemplo, con emojis.

Ejemplo de footer punto view:

<template lang="pack">
  footer.footer
    .container
      .content
        p Code with ❤️ — @tu_usuario
</template>

Instalación local en app punto view con prefijo PM. Esto limita el uso del componente a donde realmente se necesita.

• Prefijo PM para indicar componente del proyecto.
• Importar desde Components/Layout/footer.view.
• Registrar en la property components.
• Usar la etiqueta en el template. Recuerda: view convierte PascalCase a “cubic case”.

Ejemplo de registro y uso local:

<script>
import PMFooter from 'Components/Layout/footer.view'
export default {
  components: { PMFooter }
}
</script>

<template>
  section
    // ...contenido
    pm-footer
</template>

¿Qué hacer si aparece el error de un solo root?

Si el template tiene dos elementos padre, verás el error: “el template debe tener exactamente un solo componente root”.

• Causa: pm-footer al mismo nivel que app o section.
• Solución: anidar pm-footer dentro del único root del template.
• Verificar indentación para asegurar un solo componente padre.

¿Cómo construir el header con hero y navegación?

Crea header punto view con la misma base: un archivo, un componente, sin script ni style por ahora, y lang en pack. Puedes combinar HTML y pack sin problema: webpack lo resuelve.

• Usar secciones de Bulma: hero e is success para color.
• Crear hero head con nav, container y nav left para el título.
• Añadir un nav item con el nombre Platzi Music y un emoji de radio en strong.
• Crear nav right con la clase nav menu para opciones futuras.
• Agregar hero body con container y center para centrar.
• Incluir title y subtitle, por ejemplo: “Platzi Music” y “Canciones que están buenísimas”.

Ejemplo de header punto view:

<template lang="pack">
  .hero.is-success
    .hero-head
      .nav
        .container
          .nav-left
            .nav-item
              strong 📻 Platzi Music
          .nav-right.nav-menu
            // vacío por ahora
    .hero-body
      .container.center
        .title Platzi Music
        .subtitle Canciones que están buenísimas
</template>

Registra e inyecta el header igual que el footer, y colócalo arriba del section en app punto view.

• Importar PMHeader desde Components/Layout/header.view.
• Registrar en components.
• Añadir la etiqueta pm-header sobre section.
• Recordar que hasta escribir el tag en template no forma parte del DOM.

¿Cómo corregir indentación, tabs y espacios?

Revisa la indentación antes de inyectar. Mezclar tabs y espacios puede causar errores de compilación de pad. Además, nav left y nav right deben estar al mismo nivel.

• No mezclar tabs y espacios.
• Alinear nodos hermanos al mismo nivel.
• Minimizar y revisar bloques para detectar desalineaciones.

Ideas clave que aplicaste:

• Instalación local vs global: usar local cuando el componente solo vive en un lugar.
• Prefijos de componentes: PM para identificar componentes del proyecto frente a terceros o elementos HTML.
• Conversión de nombres: view pasa de PascalCase a “cubic case” al usar etiquetas.
• Un único root: cada template debe tener un solo componente padre.
• Containers y grid: con Bulma y el grid system de Flexbox centras y adaptas el contenido a distintos dispositivos.

¿Te quedó alguna duda o tienes otra forma de organizar Layout y prefijos PM? Cuéntalo en los comentarios y enriquezcamos la práctica entre todos.