Blogberichten

GitHub
Toon een lijst met blogposts in een responsieve rasterlay-out.

Gebruik

De BlogPosts-component biedt een flexibele lay-out om een lijst met BlogPost componenten weer te geven met behulp van de standaardsleuf of de posts-prop.

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

Berichten

Gebruik de posts prop als een array van objecten met de eigenschappen van de BlogPost component.

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>

Oriëntatie

Gebruik de orientation prop om de oriëntatie van de BlogPosts te wijzigen. Standaard 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>
Bij gebruik van de posts prop in plaats van de standaard slot, wordt de orientation van de berichten automatisch omgekeerd, horizontal naar vertical en vice versa.

Voorbeelden

Hoewel deze voorbeelden Nuxt Content gebruiken, kunnen de componenten worden geïntegreerd met elk contentbeheersysteem.

Binnen een pagina

Gebruik de BlogPosts-component in een pagina om een blogpagina te maken:

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>
In dit voorbeeld worden de posts opgehaald met queryCollection uit de @nuxt/content module.
De to prop wordt hier overschreven aangezien @nuxt/content de path eigenschap gebruikt.

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

Thema

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: ''
            }
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

BlogPost

A customizable article to display in a blog page.

ChangelogVersion

A customizable article to display in a changelog.