Built-In Components

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

Contenido del curso

Fundamentos de NuxtJS

Rutas y Componentes con NuxtJS

Backend con Airtable y Netlify Functions

Consumo de nuestro backend con Netlify

Cierre del curso

21
Despedida del curso
02:18 min

Tomar examen

Jhoana España Urresty

student•

me aparece así el card

article-card__________________

<template>
  <div class="article-card">
    <nuxt-link :to="slug"><h4>{{ title }}</h4></nuxt-link>
    <div class="author">
      <p>Por: {{ author }}</p>
      <small>Fecha de publicacion: {{ date }}</small>
    </div>
    <figure>
      <img :src="cover" alt="cover" />
    </figure>
    <p>{{ description }}</p>
    <div class="actions">
      <nuxt-link class="btn" :to="slug">Ir al post</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleCards",
  data() {
    return {
      slug: {
        type: String,
        default: '',
      },
      title: {
        type: String,
        default: '',
      },
      author: {
        type: String,
        default: '',
      },
      date: {
        type: Date,
        default: '',
      },
      cover: {
        type: String,
        default: '',
      },
      description: {
        type: String,
        default: '',
      },
    };
  },
};
</script>

INDEX_________________________
<template>
  <div class="container">
    <AboutMe />
    <div class="content">
      <main>
        <ArticleCards
          v-for="article in articles"
          :key="article.slug"
          v-bind="article"
          />
      </main>
    </div>
  </div>
</template>

<script>
import AboutMe from "/components/AboutMe.vue";
import ArticleCards from "/components/ArticleCards.vue";

export default {
  name: "IndexPage",
  data() {
    return {
      articles: [
        {
          title: 'Mi primer post',
          slug: 'Mi-primer-post',
          date: new Date()
        }
      ],
    };
  },
};
</script>

Diana Martinez

student•

Estás colocando el objeto de configuración del prop en la función data, debe ser en props.

Jhoana España Urresty

student•

Muuuuchas gracias

Built-In Components

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