Blogposteos

GitHub también
Mostrar una lista de entradas de blog en un diseño de cuadrícula sensible.

xph0000xUso

El componente BlogPosts proporciona un diseño flexible para mostrar una lista de componentes BlogPost utilizando la ranura predeterminada o el prop posts.

<template>
  <UBlogPosts>
    <UBlogPost
      v-for="(post, index) in posts"
      :key="index"
      v-bind="post"
    />
  </UBlogPosts>
</template>

Artículos

Utilice el prop posts como una matriz de objetos con las propiedades del componente BlogPost.

Nuxt Icon v1

Nuxt Icon v1

Discover Nuxt Icon v1!
Nuxt 3.14

Nuxt 3.14

Nuxt 3.14 is out!
Nuxt 3.13

Nuxt 3.13

Nuxt 3.13 is out!
<script setup lang="ts">
import type { BlogPostProps } from '@nuxt/ui'

const posts = ref<BlogPostProps[]>([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
    date: '2024-11-25'
  },
  {
    title: 'Nuxt 3.14',
    description: 'Nuxt 3.14 is out!',
    image: 'https://nuxt.com/assets/blog/v3.14.png',
    date: '2024-11-04'
  },
  {
    title: 'Nuxt 3.13',
    description: 'Nuxt 3.13 is out!',
    image: 'https://nuxt.com/assets/blog/v3.13.png',
    date: '2024-08-22'
  }
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BlogPostProps } from '@nuxt/ui'

const posts = ref<BlogPostProps[]>([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
    date: '2024-11-25'
  },
  {
    title: 'Nuxt 3.14',
    description: 'Nuxt 3.14 is out!',
    image: 'https://nuxt.com/assets/blog/v3.14.png',
    date: '2024-11-04'
  },
  {
    title: 'Nuxt 3.13',
    description: 'Nuxt 3.13 is out!',
    image: 'https://nuxt.com/assets/blog/v3.13.png',
    date: '2024-08-22'
  }
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

Orientación

Utilice el prop orientation para cambiar la orientación de los BlogPosts. Predeterminados a horizontal.

Nuxt Icon v1

Nuxt Icon v1

Discover Nuxt Icon v1!
Nuxt 3.14

Nuxt 3.14

Nuxt 3.14 is out!
Nuxt 3.13

Nuxt 3.13

Nuxt 3.13 is out!
<script setup lang="ts">
import type { BlogPostProps } from '@nuxt/ui'

const posts = ref<BlogPostProps[]>([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
    date: '2024-11-25'
  },
  {
    title: 'Nuxt 3.14',
    description: 'Nuxt 3.14 is out!',
    image: 'https://nuxt.com/assets/blog/v3.14.png',
    date: '2024-11-04'
  },
  {
    title: 'Nuxt 3.13',
    description: 'Nuxt 3.13 is out!',
    image: 'https://nuxt.com/assets/blog/v3.13.png',
    date: '2024-08-22'
  }
])
</script>

<template>
  <UBlogPosts orientation="vertical" :posts="posts" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BlogPostProps } from '@nuxt/ui'

const posts = ref<BlogPostProps[]>([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: 'https://nuxt.com/assets/blog/nuxt-icon/cover.png',
    date: '2024-11-25'
  },
  {
    title: 'Nuxt 3.14',
    description: 'Nuxt 3.14 is out!',
    image: 'https://nuxt.com/assets/blog/v3.14.png',
    date: '2024-11-04'
  },
  {
    title: 'Nuxt 3.13',
    description: 'Nuxt 3.13 is out!',
    image: 'https://nuxt.com/assets/blog/v3.13.png',
    date: '2024-08-22'
  }
])
</script>

<template>
  <UBlogPosts orientation="vertical" :posts="posts" />
</template>
Cuando se utiliza el soporte posts en lugar de la ranura predeterminada, el orientation de los postes se invierte automáticamente, horizontal a vertical y viceversa.

Ejemplos

Si bien estos ejemplos utilizan Nuxt Content, los componentes se pueden integrar con cualquier sistema de gestión de contenido.

Dentro de una página

Utilice el componente BlogPosts de una página para crear una página de blog:

pages/blog/index.vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => queryCollection('posts').all())
</script>

<template>
  <UPage>
    <UPageHero title="Blog" />

    <UPageBody>
      <UContainer>
        <UBlogPosts>
          <UBlogPost
            v-for="(post, index) in posts"
            :key="index"
            v-bind="post"
            :to="post.path"
          />
        </UBlogPosts>
      </UContainer>
    </UPageBody>
  </UPage>
</template>
En este ejemplo, los posts se obtienen utilizando queryCollection desde el módulo @nuxt/content.
La prop to se anula aquí ya que @nuxt/content usa la propiedad path.

API (Edición española)

Props (accesorios)

Prop Default Type
as
'div'
any

The element or component this component should render as.

posts
BlogPostProps[]
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the blog posts.

ui
{ base?: any; }

Slots

Slot Type
date
{ post: T; }
badge
{ post: T; }
title
{ post: T; }
description
{ post: T; }
authors
{ ui: object; } & { post: T; }
header
{ ui: object; } & { post: T; }
body
{ post: T; }
footer
{ post: T; }
default
{}

Temas

app.config.ts
export default defineAppConfig({
  ui: {
    blogPosts: {
      base: 'flex flex-col gap-8 lg:gap-y-16',
      variants: {
        orientation: {
          horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
          vertical: ''
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        blogPosts: {
          base: 'flex flex-col gap-8 lg:gap-y-16',
          variants: {
            orientation: {
              horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
              vertical: ''
            }
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes

BlogPost

A customizable article to display in a blog page.

ChangelogVersion

A customizable article to display in a changelog.