BlogPosts

GitLab
Exiba uma lista de posts de blog em um layout de grade responsivo.

Uso

O componente BlogPosts oferece um layout flexível para exibir uma lista de componentes BlogPost usando o slot padrão ou a prop posts.

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

Posts

Use a prop posts como um array de objetos com as propriedades do 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 '@nitro/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>
  <NBlogPosts :posts="posts" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BlogPostProps } from '@nitro/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>
  <NBlogPosts :posts="posts" />
</template>

Orientação

Use a prop orientation para alterar a orientação do BlogPosts. O padrão é 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 '@nitro/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>
  <NBlogPosts orientation="vertical" :posts="posts" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BlogPostProps } from '@nitro/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>
  <NBlogPosts orientation="vertical" :posts="posts" />
</template>
Ao usar a prop posts em vez do slot padrão, a orientation dos posts é invertida automaticamente, de horizontal para vertical e vice-versa.

Exemplos

Embora estes exemplos usem o Nuxt Content, os componentes podem ser integrados a qualquer sistema de gerenciamento de conteúdo.

Dentro de uma página

Use o componente BlogPosts em uma página para criar uma página de blog:

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

<template>
  <NPage>
    <NPageHero title="Blog" />

    <NPageBody>
      <NContainer>
        <NBlogPosts>
          <NBlogPost
            v-for="(post, index) in posts"
            :key="index"
            v-bind="post"
            :to="post.path"
          />
        </NBlogPosts>
      </NContainer>
    </NPageBody>
  </NPage>
</template>
Neste exemplo, os posts são buscados usando queryCollection do módulo @nuxt/content.
A prop to é sobrescrita aqui, já que o @nuxt/content usa a propriedade path.

API

Props

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

Tema

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 '@nitro/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

No recent changes

BlogPost

Um artigo personalizável para exibir em uma página de blog.

ChangelogVersion

Um artigo personalizável para exibir em um changelog.