BlogList

Display your BlogPost in an horizontal / vertical list.

Take a look at the SaaS template to see how you can build your own blog! (view source)

Usage

Use some BlogPost to display articles horizontally or vertically.

<template>
  <UBlogList orientation="horizontal">
    <UBlogPost
      title="Nuxt 3.9"
      description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
    />
    <UBlogPost
      title="Nuxt DevTools 1.0"
      description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
    />
    <UBlogPost
      title="Nuxt 3.8"
      description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
    />
  </UBlogList>
</template>

When using the vertical orientation on the BlogList component, you will want to use the BlogPost components with the horizontal orientation.

<template>
  <UBlogList orientation="vertical">
    <UBlogPost
      title="Nuxt 3.9"
      description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
      orientation="horizontal"
    />
    <UBlogPost
      title="Nuxt DevTools 1.0"
      description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
      orientation="horizontal"
    />
    <UBlogPost
      title="Nuxt 3.8"
      description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
      orientation="horizontal"
    />
  </UBlogList>
</template>

This component can be put directly inside a LandingSection with its content fetched from @nuxt/content easily:

content/index.yml

blog:
  title: Blog
  description: Read the latest news from our blog.
  posts:
    - title: Nuxt 3.9
      description: Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
      image:
        src: https://picsum.photos/id/10/640/360
        alt: Nuxt 3.9
    - title: Nuxt DevTools 1.0
      description: Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
      image:
        src: https://picsum.photos/id/11/640/360
        alt: Nuxt DevTools 1.0
    - title: Nuxt 3.8
      description: Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
      image:
        src: https://picsum.photos/id/12/640/360
        alt: Nuxt 3.8

We’re using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.

pages/index.vue

<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.blog.title" :description="page.blog.description">
    <UBlogList>
      <UBlogPost v-for="(post, index) in page.blog.posts" :key="index" v-bind="post" />
    </UBlogList>
  </ULandingSection>
</template>

Slots

• default {}

Props

• ui - any - Default: {}
• orientation - “horizontal” | “vertical” - Default: "horizontal"

Config

{
  wrapper: 'flex flex-col lg:grid lg:grid-cols-3 gap-x-8 gap-y-16'
}