Usage
The LandingTestimonial component will wrap your content in a Card.
Use the quote, icon and author props to customize the content of card.
<template>
<ULandingTestimonial
icon="i-simple-icons-google"
quote="Aliquip irure laboris deserunt in dolore in consectetur ex duis. Mollit ad esse ipsum irure id veniam irure culpa dolore labore."
:author="{ name: 'Rose Roberson', description: 'CEO at Google', to: 'https://google.com', target: '_blank', avatar: { src: 'https://i.pravatar.cc/120?img=1', loading: 'lazy' } }"
card
/>
</template>
You can disable its border and card style by setting the
card prop to false.This component can be put directly inside a PageColumns with its content fetched from @nuxt/content easily:
content/index.yml
testimonials:
title: What people are saying
description: Hear from our customers about their experience.
items:
- quote: Nostrud tempor sunt fugiat.
author:
name: Rose Roberson
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=1
- quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
author:
name: Chace Rodgers
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=7
- quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor.
author:
name: Cornelius Sheppard
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=3
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.testimonials.title" :description="page.testimonials.description">
<UPageColumns>
<!-- Hack for Safari -->
<div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
<ULandingTestimonial v-bind="testimonial" />
</div>
</UPageColumns>
</ULandingSection>
</template>
Slots
icon
{}
quote
{}
Props
quoterequired
string
icon
string
undefinedui
{}
{}author
{ name: string; description?: string; avatar?: Avatar; } & NuxtLinkProps
undefinedcard
boolean
true