Blogposts Bearbeiten

GitHub
Zeigt eine Liste von Blog-Posts in einem responsiven Rasterlayout an.

Bearbeiten

Die BlogPosts-Komponente bietet ein flexibles Layout, um eine Liste von BlogPost-Komponenten entweder über den Standardsteckplatz oder die posts-Prop anzuzeigen.

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

Posts (englisch)

Verwenden Sie die posts-Prop als Array von Objekten mit den Eigenschaften der Komponente 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>

Ausrichtung

Verwenden Sie die orientation prop, um die Ausrichtung der BlogPosts. Defaults auf horizontal zu ändern.

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>
Wenn Sie die posts-Prop anstelle des Standardsteckplatzes verwenden, wird die orientation der Pfosten automatisch umgekehrt, horizontal zu vertical und umgekehrt.

Examples (Deutsche Ausgabe)

Während diese Beispiele Nuxt Content verwenden, können die Komponenten in jedes Content Management System integriert werden.

innerhalb einer Seite

Verwenden Sie die BlogPosts-Komponente in einer Seite, um eine Blogseite zu erstellen:

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 diesem Beispiel werden die posts mit queryCollection aus dem @nuxt/content-Modul abgerufen.
Die to-Prop wird hier überschrieben, da @nuxt/content die Eigenschaft path verwendet.

API (Englisch)

Props (nicht)

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 (englisch)

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

Theme Bearbeiten

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 (englisch)

No recent changes

BlogPost

A customizable article to display in a blog page.

ChangelogVersion

A customizable article to display in a changelog.