Built-In Components

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

Carlos Rodríguez

student•

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

student•

default.vue

<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>

Fabricio Orrala

student•

¿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?

Diana Martinez

student•

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

Fabricio Orrala

student•

Genial! Gracias!

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

Isaac Israel Groisman Oberman

student•

para cuando el curso de Nuxt 3 ?

Diana Martinez

student•

Estamos trabajando en eso :D

Isaac Israel Groisman Oberman

student•

cool profe, estare pendiente!

Carlos Perilla

student•

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