Nuxt Icon v1
Discover Nuxt Icon v1!
BlogPostsPRO
在响应式网格布局中显示博客文章列表。
用法
BlogPosts 组件提供灵活的布局，可以使用默认插槽或 posts prop 来显示一系列 BlogPost 组件。
<template>
<UBlogPosts>
<UBlogPost
v-for="(post, index) in posts"
:key="index"
v-bind="post"
/>
</UBlogPosts>
</template>
文章
使用 posts prop 作为对象的数组，其中每个对象包含 BlogPost 组件的属性。
Nuxt 3.14
Nuxt 3.14 is out!
Nuxt 3.13
Nuxt 3.13 is out!
<script setup lang="ts">
const posts = ref([
{
title: 'Nuxt Icon v1',
description: 'Discover Nuxt Icon v1!',
image: 'https://nuxtjs.org.cn/assets/blog/nuxt-icon/cover.png',
date: '2024-11-25'
},
{
title: 'Nuxt 3.14',
description: 'Nuxt 3.14 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.14.png',
date: '2024-11-04'
},
{
title: 'Nuxt 3.13',
description: 'Nuxt 3.13 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.13.png',
date: '2024-08-22'
}
])
</script>
<template>
<UBlogPosts :posts="posts" />
</template>
方向
使用 orientation prop 更改 BlogPosts 的方向。默认为 horizontal。
Nuxt Icon v1
Discover Nuxt Icon v1!
Nuxt 3.14
Nuxt 3.14 is out!
Nuxt 3.13
Nuxt 3.13 is out!
<script setup lang="ts">
const posts = ref([
{
title: 'Nuxt Icon v1',
description: 'Discover Nuxt Icon v1!',
image: 'https://nuxtjs.org.cn/assets/blog/nuxt-icon/cover.png',
date: '2024-11-25'
},
{
title: 'Nuxt 3.14',
description: 'Nuxt 3.14 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.14.png',
date: '2024-11-04'
},
{
title: 'Nuxt 3.13',
description: 'Nuxt 3.13 is out!',
image: 'https://nuxtjs.org.cn/assets/blog/v3.13.png',
date: '2024-08-22'
}
])
</script>
<template>
<UBlogPosts orientation="vertical" :posts="posts" />
</template>
当使用
posts prop 而非默认插槽时，文章的 orientation 会自动反转，即 horizontal 变为 vertical，反之亦然。示例
虽然这些示例使用了Nuxt Content，但这些组件可以与任何内容管理系统集成。
在页面中使用
在页面中使用 BlogPosts 组件创建一个博客页面
pages/blog/index.vue
<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () => queryCollection('posts').all())
</script>
<template>
<UPage>
<UPageHero title="Blog" />
<UPageBody>
<UContainer>
<UBlogPosts>
<UBlogPost
v-for="(post, index) in posts"
:key="index"
v-bind="post"
:to="post.path"
/>
</UBlogPosts>
</UContainer>
</UPageBody>
</UPage>
</template>
在此示例中，
posts 是使用 @nuxt/content 模块中的 queryCollection 获取的。由于
@nuxt/content 使用 path 属性，因此在此处覆盖了 to prop。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应该渲染为的元素或组件。 |
orientation |
|
|
posts |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
uiPro: {
blogPosts: {
base: 'flex flex-col gap-8 lg:gap-y-16',
variants: {
orientation: {
horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
vertical: ''
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
uiPro: {
blogPosts: {
base: 'flex flex-col gap-8 lg:gap-y-16',
variants: {
orientation: {
horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
vertical: ''
}
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
blogPosts: {
base: 'flex flex-col gap-8 lg:gap-y-16',
variants: {
orientation: {
horizontal: 'sm:grid sm:grid-cols-2 lg:grid-cols-3',
vertical: ''
}
}
}
}
})
]
})