<vue-testimonials>
Discover how to use and configure vue-testimonials
Basic usage
<template>
<vue-testimonials :items="items" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'App',
setup() {
const items = ref([
{
title: 'Excelent',
content:
'"I just updated my site and it was so simple! Thanks for being so awesome!"',
image: 'https://i.pravatar.cc/160?img=13',
author: 'Jason',
},
{
title: 'Outstanding',
content:
'"She was thoughtful during the entire process and exceed my expectations!"',
image: 'https://i.pravatar.cc/160?img=31',
author: 'Emily',
},
{
title: 'The best',
content:
'"My new site is so much faster and easier to work with. Thanks guys!"',
image: 'https://i.pravatar.cc/160?img=45',
author: 'Amelia',
},
])
return { items }
},
})
</script>
Props
interval
Number in milliseconds to change from one testimonial to the other
type: Number
default: 8000
<vue-testimonials :interval="8000" />
items
Array of objects, that each object represents one Testimonial. Check out the interface below:
export interface Testimonial {
readonly title: string
readonly content: string
readonly image: string
readonly imageAlt?: string
readonly author: string
}
-
title: Testimonial's title text -
content: Text content of the testimonial. Will be added withv-html, so you can passHTMLhere as string (with caution) -
image: Image URL for the avatar image'ssrcattribute -
imageAlt: Image alt attribute. Will use theauthorwhenimageAltis not provided -
author: Author of the testimonial, text below the content
Example:
{
title: 'Excelent',
content:
'"I just updated my site and it was so simple! Thanks for being so awesome!"',
image: 'https://i.pravatar.cc/160?img=13',
author: 'Jason',
}
type: Array as () => Testimonial[]
required: true
arrowColor
Specify the arrow's color here
Example:
<vue-testimonials arrow-color="#000000" />
type: String
default: #FFFFFF
arrowWidth
Specify the arrow's width here
Example:
<vue-testimonials arrow-width="32px" />
type: [Number, String]
default: 64px
arrowHeight
Specify the arrow's height here
Example:
<vue-testimonials arrow-height="32px" />
type: [Number, String]
default: 64px
ballActiveColorClass
Specify the ball's active color class, that are located at the bottom of the testimonial
Example:
<vue-testimonials ball-active-color-class="text-red-500" />
type: String
default: null
ballInactiveColorClass
Specify the ball's inactive color class, that are located at the bottom of the testimonial
Example:
<vue-testimonials ball-inactive-color-class="text-red-500" />
type: String
default: null
ballWidth
Specify the ball's width, that are located at the bottom of the testimonial
Example:
<vue-testimonials ball-width="32px" />
type: [Number, String]
default: 20px
ballHeight
Specify the ball's height, that are located at the bottom of the testimonial
Example:
<vue-testimonials ball-height="32px" />
type: [Number, String]
default: 20px
titleClasses
Pass here classes that you want in order to customize the testimonial's title
Example:
<vue-testimonials title-classes="text-red-500 text-8xl" />
type: [Object, String]
default: null
authorClasses
Pass here classes that you want in order to customize the testimonial's author
Example:
<vue-testimonials author-classes="text-red-500 text-8xl" />
type: [Object, String]
default: null
contentClasses
Pass here classes that you want in order to customize the testimonial's content
Example:
<vue-testimonials content-classes="text-red-500 text-8xl" />
type: [Object, String]
default: null