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.

Example with vertical orientation:

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

<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 - Content for the image section
• badge - Content for the badge section
• title - Content for the title section
• description - Content for the description section
• authors - Content for the authors section
• date - Content for the date section
• default - Default slot content

Props

• target - “_blank” | “_parent” | “_self” | “_top” | (string & {})
• to - string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
• activeClass - string
• exactActiveClass - string
• ariaCurrentValue - “page” | “step” | “location” | “date” | “time” | “true” | “false”
• prefetchedClass - string
• date - string | Date (default: undefined)
• title - string (default: undefined)
• description - string (default: undefined)
• image - string | Partial (default: undefined)
• badge - Badge (default: undefined)
• authors - ({ name: string; avatar: Avatar; } & NuxtLinkProps)[] (default: undefined)
• orientation - “vertical” | “horizontal” (default: “vertical”)
• ui - any (default: {})

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