Cursos Empresas Blog Live Conf Eventos Precios

0:0017:47

Built-In Components

Curso de Server Side Rendering con Nuxt 2

Clase 9 de 21

Clase 9 / 21

<style lang="scss" scoped>
.layout-default {
  @apply min-h-full;
  header {
    @apply sticky absolute top-0 bg-white z-10;
    menu {
      @apply m-auto flex justify-between items-center w-full max-w-5xl px-4 py-6;
    }
    .brand {
      @apply font-bold text-2xl;
    }
  }
}
</style>

Jhoana España Urresty

Hace 4 años

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

Hace 4 años

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

Jhoana España Urresty

Hace 4 años

Muuuuchas gracias

Comentarios (7)7 comentarios

Carlos Rodríguez

Con ansias en la espera de Nuxt 3 con Vite, ya que Webpack es una tortura, es esa novia tóxica que te hace la vida añicos cada día.

Ameth Ordoñez Erazo

default.vue

Fabricio Orrala

¿Cómo usaría desde una pagina un layout que no sea default? Por ejemplo si le pongo de nombre ProfileLayout o HomeLayout. Desde una pagina, cómo le especifico que use uno de éstos dos?

Puedes agregar la option "layout" con el valor del nombre del layout que quieres utilizar, o una función que retorne ese nombre, por ejemplo:

<script>
export default {
  layout: 'blog',
  // OR
  layout (context) {
    return 'blog'
  }
}
</script>

Puedes encontrar más al respecto en la documentación: https://nuxtjs.org/docs/directory-structure/layouts

Genial! Gracias!

Carlos Perilla

Con Nuxt 3 debemos usar <slot /> en lugar de <Nuxt /> y si tenemos app.vue, debemos envolver <NuxtPage/> con <NuxtLayout></NuxtLayout>

Anyami Cornieles

Hace 8 meses

Hola, ¿no salió nunca el curso de Nuxt 3?

Isaac Israel Groisman Oberman

para cuando el curso de Nuxt 3 ?

Estamos trabajando en eso :D

cool profe, estare pendiente!

Built-In Components

Progreso 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