BlogList - Nuxt UI Pro

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.

orientation

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 v1.0 is out, generally available to all Nuxt projects!

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.

orientation

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 v1.0 is out, generally available to all Nuxt projects!

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

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

AuthForm

A customizable Form to create login, register or password reset forms.

BlogPost

A customizable <article> to display in your blog pages.