Creación del componente para las cards

Clase 6 de 21 • Curso de Server Side Rendering con Nuxt 2

Mauricio Combariza

student•

Estilos About-me

<style lang="scss" scoped>
.about-me {
  @apply w-full flex flex-col justify-center items-center px-4 py-16 bg-gray-200;
  h1 {
    @apply font-black text-4xl text-gray-900 pb-2;
  }
  p {
    @apply text-lg py-2;
  }
}
</style>

Mauricio Combariza

student•

Estilos ArticleCard

<style lang="scss" scoped>
.article-card {
  @apply block bg-white sm:border sm:rounded-lg p-4;
  h3 {
    @apply font-bold text-xl mb-2 mt-0;
  }
  div.author {
    @apply my-2;
    p {
      @apply m-0;
    }
    small {
      @apply italic;
    }
  }
  figure {
    img {
      @apply w-full;
    }
  }
  p {
    @apply my-4 font-serif;
  }
  div.actions {
    @apply flex gap-2;
    .btn {
      @apply w-full text-center border rounded-full px-8 py-2 bg-gray-200 hover:bg-gray-300;
    }
  }
}
</style>

Fabricio Orrala

student•

Si el estilo CSS crece mucho (aunque por tailwind se espera que no), o si el codigo javascript/typescript crece, recomiendas separar ésto en múltiples archivos? Es decir, uno para el TS/JS otro para el html (Vue) y otro para el SCSS/CSS ?? Como afecta el naming de las paginas? Ahi si las ponemos en directorio específico?

Diana Martinez

student•

Claro, siempre puedes reorganizar todo como sea necesario, en el ecosistema de Vue más que separar el template, js/ts y los estilos, lo que se recomienda es separar en componentes más atómicos y específicos, cada uno con su template, código y estilos.

El naming puede ser el que necesites, pero la regla para que genere las rutas es que sea dentro de pages aquello que quieras hacer vue, y la estructura de la carpeta será el resultado en la URL.

Fabricio Orrala

student•

Gracias!