Nuxt UI v4 is officially released!

BlogPost

GitHub
A customizable <article> to display in your blog pages.
Take a look at the SaaS template to see how you can build your own blog! (view source)

Usage

The BlogPost component is a pre-built <article> element that you can use in a BlogList.

Use the title, description, date, image, badge and authors props to customize the article.

You can also pass any property from the NuxtLink component such as to, target, exact, etc.

Nuxt 3.9
Release

Nuxt 3.9

Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more.
Daniel Roe
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

The image prop can be a string that will be used as the src attribute of an <img> element, or an object with any of the <img> attributes.

The <NuxtImg> component is used to display the image. You will be prompted to install @nuxt/image if you haven't already.

You can change the orientation from vertical to horizontal to display the image on the left.

Nuxt 3.9
Release

Nuxt 3.9

Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables...
Daniel Roe
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

image
{}
badge
{}
title
{}
description
{}
authors
{}
date
{}
default
{}

Props

target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
undefined
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
undefined
activeClass
string
undefined
exactActiveClass
string
undefined
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
undefined
prefetchedClass
string
undefined
date
string | Date
undefined
title
string
undefined
description
string
undefined
image
string | Partial<HTMLImageElement>
undefined
badge
Badge
undefined
authors
({ name: string; avatar: Avatar; } & NuxtLinkProps<false>)[]
undefined
orientation
"vertical" | "horizontal"
'vertical'
class
any
undefined
ui
any
{}
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
undefined
rel
any
undefined
replace
boolean
undefined
noRel
boolean
undefined
prefetch
boolean
undefined
noPrefetch
boolean
undefined
external
boolean
undefined

Config

{
  wrapper: 'relative group flex flex-col w-full gap-y-6',
  image: {
    wrapper: 'ring-1 ring-gray-200 dark:ring-gray-800 relative overflow-hidden aspect-[16/9] w-full rounded-lg pointer-events-none',
    base: 'object-cover object-top w-full h-full transform transition-transform duration-200 group-hover:scale-105'
  },
  container: 'flex flex-col justify-between flex-1',
  inner: 'flex-1',
  badge: {
    wrapper: 'mb-3',
    base: ''
  },
  title: 'text-gray-900 dark:text-white text-xl font-semibold truncate group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200',
  description: 'text-base text-gray-500 dark:text-gray-400 mt-1',
  date: 'text-sm text-gray-500 dark:text-gray-400 font-medium pointer-events-none',
  authors: {
    wrapper: 'relative flex items-center gap-x-3 mt-4',
    avatar: {
      base: 'relative ring-1 lg:hover:scale-105 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform',
      size: 'xs'
    }
  }
}

BlogList

Display your BlogPost in an horizontal / vertical list.

ColorModeAvatar

An Avatar with a different src for light and dark mode.