Pro

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

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

BlogList

Display your BlogPost in an horizontal / vertical list.

ColorModeAvatar

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