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!

Creación del componente para las cards

Fundamentos de NuxtJS

Introducción a Nuxtjs

Características de NuxtJS

Cómo crear un proyecto con NuxtJS

Rutas y Componentes con NuxtJS

Rutas dinámicas con NuxtJS

Maquetación de vistas en nuestro proyecto

Creación del componente para las cards

Integración del intérprete de Markdown en NuxtJS

Cómo agregar SEO y meta tags en NuxtJS

Built-In Components

Backend con Airtable y Netlify Functions

Backend con Airtable

Despliegue y API con Netlify

Configuración de Netlify

Programando las funciones para Netlify

Consumo de nuestro backend con Netlify

Módulos de NuxtJS

Usando el módulo HTTP para consumir nuestro backend

Context

Consumir el API

Sistema de comentarios

Utilidades en NuxtJS

Estrategias de renderizado

Cierre del curso

Despedida del curso