The PricingPlans component provides a flexible layout to display a list of PricingPlan components using either the default slot or the plans prop.
<template>
<UPricingPlans>
<UPricingPlan
v-for="(plan, index) in plans"
:key="index"
v-bind="plan"
/>
</UPricingPlans>
</template>
plans prop but also with the default slot.Use the plans prop as an array of objects with the properties of the PricingPlan component.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans :plans="plans" />
</template>
Use the orientation prop to change the orientation of the PricingPlans. Defaults to horizontal.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans orientation="vertical" :plans="plans" />
</template>
plans prop instead of the default slot, the orientation of the plans is automatically reversed, horizontal to vertical and vice versa.Use the compact prop to reduce the padding between the plans when one of the plans is scaled for a better visual balance.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans compact :plans="plans" />
</template>
Use the scale prop to adjust the spacing between the plans when one of the plans is scaled for a better visual balance.
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans scale :plans="plans" />
</template>
Use the PricingPlans component in a page to create a pricing page:
<script setup lang="ts">
const { data: plans } = await useAsyncData('plans', () => queryCollection('plans').all())
</script>
<template>
<UPage>
<UPageHero title="Pricing" />
<UPageBody>
<UContainer>
<UPricingPlans :plans="plans" />
</UContainer>
</UPageBody>
</UPage>
</template>
plans are fetched using queryCollection from the @nuxt/content module.| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
plans |
| |
orientation |
|
The orientation of the pricing plans. |
compact |
|
When |
scale |
|
When |
| Slot | Type |
|---|---|
badge |
|
title |
|
description |
|
price |
|
discount |
|
billing |
|
features |
|
button |
|
header |
|
body |
|
footer |
|
tagline |
|
terms |
|
default |
|
export default defineAppConfig({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
]
})