Built-In Components
Contenido del curso
Built-In Components
Contenido del curso
Carlos Rodríguez
Ameth Ordoñez Erazo
Fabricio Orrala
Diana Martinez
Fabricio Orrala
Carlos Perilla
Anyami Cornieles
Jhoana España Urresty
Diana Martinez
Jhoana España Urresty
Isaac Israel Groisman Oberman
Diana Martinez
Isaac Israel Groisman Oberman
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.
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>
¿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!
Con Nuxt 3 debemos usar <slot /> en lugar de <Nuxt /> y si tenemos app.vue, debemos envolver <NuxtPage/> con <NuxtLayout></NuxtLayout>
Hola, ¿no salió nunca el curso de Nuxt 3?
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>
Estás colocando el objeto de configuración del prop en la función data, debe ser en props.
Muuuuchas gracias
para cuando el curso de Nuxt 3 ?
Estamos trabajando en eso :D
cool profe, estare pendiente!
