Nuxt 3.9
Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
BlogList
Display your BlogPost in an horizontal / vertical list.
Take a look at the SaaS template to see how you can build your own blog! (view source)
Usage
Use some BlogPost to display articles horizontally or vertically.
Nuxt DevTools 1.0
Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
Nuxt 3.8
Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
<template>
<UBlogList orientation="horizontal">
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
/>
<UBlogPost
title="Nuxt DevTools 1.0"
description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
/>
<UBlogPost
title="Nuxt 3.8"
description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
/>
</UBlogList>
</template>
When using the vertical orientation on the BlogList component, you will want to use the BlogPost components with the horizontal orientation.
Nuxt 3.9
Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
Nuxt DevTools 1.0
Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
Nuxt 3.8
Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
<template>
<UBlogList orientation="vertical">
<UBlogPost
title="Nuxt 3.9"
description="Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive..."
orientation="horizontal"
/>
<UBlogPost
title="Nuxt DevTools 1.0"
description="Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!"
orientation="horizontal"
/>
<UBlogPost
title="Nuxt 3.8"
description="Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app..."
orientation="horizontal"
/>
</UBlogList>
</template>
This component can be put directly inside a LandingSection with its content fetched from @nuxt/content easily:
content/index.yml
blog:
title: Blog
description: Read the latest news from our blog.
posts:
- title: Nuxt 3.9
description: Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive...
image:
src: https://picsum.photos/id/10/640/360
alt: Nuxt 3.9
- title: Nuxt DevTools 1.0
description: Nuxt DevTools v1.0 is out, generally available to all Nuxt projects!
image:
src: https://picsum.photos/id/11/640/360
alt: Nuxt DevTools 1.0
- title: Nuxt 3.8
description: Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app...
image:
src: https://picsum.photos/id/12/640/360
alt: Nuxt 3.8
We're using
.yml files as an example here but you can use any format supported by @nuxt/content like .md or .json.pages/index.vue
<script setup>
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection :title="page.blog.title" :description="page.blog.description">
<UBlogList>
<UBlogPost v-for="(post, index) in page.blog.posts" :key="index" v-bind="post" />
</UBlogList>
</ULandingSection>
</template>
Slots
default
{}
Props
ui
any
{}orientation
"horizontal" | "vertical"
"horizontal"Config
{
horizontal: 'flex flex-col lg:grid lg:grid-cols-3 gap-x-8 gap-y-16',
vertical: 'flex flex-col gap-y-16 w-full'
}