Les blogposts

GitHub à
Affichez une liste d

Utilisation

Le composant BlogPosts fournit une disposition flexible pour afficher une liste de composants BlogPost en utilisant soit l'emplacement par défaut, soit le prop posts.

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

Posts

Utilisez la prop posts comme un tableau d'objets avec les propriétés du composant 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>

Définition

Utilisez la prop orientation pour changer l'orientation des BlogPosts. Defaults à 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>
Lorsque vous utilisez le prop posts au lieu de l'emplacement par défaut, le orientation des postes est automatiquement inversé, horizontal à vertical et vice versa.

Exemples

Bien que ces exemples utilisent Nuxt Content, les composants peuvent être intégrés à n'importe quel système de gestion de contenu.

Dans une page

Utiliser le composant BlogPosts dans une page pour créer une page 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>
Dans cet exemple, les posts sont récupérés à l'aide de queryCollection à partir du module @nuxt/content.
La propriété to est remplacée ici puisque @nuxt/content utilise la propriété path.

API

Props équipements

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

Thème

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

No recent changes

BlogPost

A customizable article to display in a blog page.

ChangelogVersion

A customizable article to display in a changelog.