Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

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.

Nuxt 3.9

Nuxt 3.9

Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...

Nuxt DevTools 1.0

Nuxt DevTools 1.0

Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!

Nuxt 3.8

Nuxt 3.8

Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...

<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.

Nuxt 3.9

Nuxt 3.9

Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...

Nuxt DevTools 1.0

Nuxt DevTools 1.0

Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!

Nuxt 3.8

Nuxt 3.8

Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...

<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
{}
orientation
"horizontal" | "vertical"
"horizontal"

Config

{
  horizontal: 'flex flex-col lg:grid lg:grid-cols-3 gap-x-8 gap-y-16',
  vertical: 'flex flex-col gap-y-16 w-full'
}