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.
<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' }"
/>
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.
<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' }"
/>
Slots
image
{}
badge
{}
title
{}
description
{}
authors
{}
date
{}
Props
ui
any
{}orientation
"horizontal" | "vertical"
"vertical"description
string
undefineddate
string | Date
undefinedtitle
string
undefinedbadge
any
undefinedimage
any
undefinedauthors
({ name: string; avatar: Avatar; } & Link)[]
undefinedto
unknown
href
unknown
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
rel
string
activeClass
string
exactActiveClass
string
ariaCurrentValue
string
inactiveClass
string
exact
boolean
replace
boolean
active
boolean
external
boolean
custom
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
exactQuery
boolean
exactMatch
boolean