Latest articles
Render display-ready post cards while your app owns routes, dates, images, authors, and content loading.
From mockup to market: a practical design process
A field guide to moving from research and wireframes into shippable Nuxt interfaces without losing product context.
Emma Thompson
Color systems that survive implementation
How semantic tokens keep visual decisions portable across marketing pages, docs, and product surfaces.
The case for slow design in fast interfaces
Designing moments of pause can help content-heavy products feel more intentional and easier to scan.
Installation
Usage
<script setup lang="ts">
import { BlogPostGrid, type BlogPostGridPost } from '@/components/blog-post-grid'
const posts: BlogPostGridPost[] = [
{
id: 'design-process',
to: '/blog/design-process',
title: 'From mockup to market',
description: 'A field guide to moving from research into shippable interfaces.',
dateLabel: 'Apr 23, 2026',
badge: 'Design',
readTime: '8 min read',
image: {
src: '/images/design-process.jpg',
alt: 'Design notes and a laptop'
},
authors: [
{ name: 'Emma Thompson' }
]
}
]
</script>
<template>
<BlogPostGrid
title="Latest articles"
description="Render display-ready post cards while your app owns routing and formatting."
:posts="posts"
/>
</template>App-Owned Post Data
BlogPostGrid renders display-ready data. Your app owns fetching, sorting, slicing, localization, date formatting, route construction, image policy, and analytics.
Pass formatted strings such as Apr 23, 2026 through dateLabel. The component does not call new Date(), generate routes from slugs, import global post data, or install icon/button/avatar dependencies.
Use to for internal Nuxt routes and href for external links. For target="_blank", the component adds rel="noopener noreferrer" unless you provide a custom rel value.
Examples
Featured first post
Latest articles
Render display-ready post cards while your app owns routes, dates, images, authors, and content loading.
From mockup to market: a practical design process
A field guide to moving from research and wireframes into shippable Nuxt interfaces without losing product context.
Emma ThompsonColor systems that survive implementation
How semantic tokens keep visual decisions portable across marketing pages, docs, and product surfaces.
The case for slow design in fast interfaces
Designing moments of pause can help content-heavy products feel more intentional and easier to scan.
API Reference
Props
Types
interface BlogPostGridImage {
src: string
alt?: string
}
interface BlogPostGridAuthor {
name: string
avatar?: BlogPostGridImage
}
interface BlogPostGridPost {
id?: string
to?: string
href?: string
target?: HTMLAnchorElement['target']
rel?: string
title: string
description?: string
dateLabel?: string
badge?: string
readTime?: string
image?: BlogPostGridImage
authors?: BlogPostGridAuthor[]
}