Nuxt UI Pro v1.0 is out with dashboard components!

BlogPost

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
<template>
  <UBlogPost
    title="Nuxt 3.9"
    description="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."
    date="Dec 25, 2023"
    orientation="vertical"
    :image="{ src: 'https://picsum.photos/640/360', alt: 'Nuxt 3.9' }"
    :authors="[{ name: 'Daniel Roe', avatar: { src: 'https://github.com/danielroe.png', target: '_blank' }, to: 'https://twitter.com/danielcroe' }]"
    :badge="{ label: 'Release' }"
  />
</template>

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
<template>
  <UBlogPost
    title="Nuxt 3.9"
    description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables..."
    date="Dec 25, 2023"
    orientation="horizontal"
    :image="{ src: 'https://picsum.photos/640/360', alt: 'Nuxt 3.9' }"
    :authors="[{ name: 'Daniel Roe', avatar: { src: 'https://github.com/danielroe.png', target: '_blank' }, to: 'https://twitter.com/danielcroe' }]"
    :badge="{ label: 'Release' }"
  />
</template>

Slots

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

Props

target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
any
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
rel
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"
"noopener""noreferrer""nofollow""sponsored""ugc"
prefetchedClass
string
date
string | Date
undefined
title
string
undefined
description
string
undefined
image
any
undefined
badge
any
undefined
authors
({ name: string; avatar: Avatar; } & NuxtLinkProps)[]
undefined
orientation
"vertical" | "horizontal"
"vertical"
ui
any
{}
href
any
replace
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean

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