nuxt-x-affiliate
Pricing Plans
Pricing plan cards with an optional monthly/yearly toggle and a trust badge row.
Pricing Plans
Plan cards with an optional monthly/yearly toggle and a row of trust badges.
An adapter over Nuxt UI's <UPricingPlans> — what it adds is the friendlier plan
shape, the billing toggle, and the badge row.
On a review site this lays out the subject's pricing (the SaaS or subscription product being reviewed), not your own.
Components
<XAFPricingPlans />
<XAFPricingPlans
has-billing-toggle
:plans="plans"
:badges="['no-credit-card', 'cancel-anytime']"
@select="onSelect"
/>
<script setup>
const plans = [
{
name: 'Free',
price: { monthly: '$0', yearly: '$0' },
description: 'Everything you need to start.',
features: ['All reviews', 'Comparison tables'],
button: { label: 'Start reading' },
},
{
name: 'Pro',
price: { monthly: '$15', yearly: '$150' },
features: ['Everything in Free', 'Bulk spec exports'],
button: { label: 'Go Pro' },
popular: true,
},
]
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlan[] | required | The plans to render |
highlighted | string | '' | Highlight by name — alternative to popular |
hasBillingToggle | boolean | false | Show the monthly / yearly switch |
yearlyDiscount | number | 10 | Discount percentage shown on the yearly option |
scale | boolean | false | Enlarge the highlighted plan. Excludes compact |
compact | boolean | true | Butt the cards together. Excludes scale |
badges | Badge[] | [] | Trust badges above or below the cards |
badgesPosition | 'top' | 'bottom' | 'bottom' | Badge row position |
badgesAlign | 'left' | 'center' | 'right' | 'center' | Badge row alignment |
popularLabel | string | 'Most Popular' | Badge text on the highlighted plan |
PricingPlan object
| Key | Type | Description |
|---|---|---|
name | string | Plan name |
price | string | { monthly, yearly } | Flat price, or a pair to drive the toggle |
period | string | Billing suffix. Derived from the toggle when omitted |
description | string | Line under the plan name |
features | string[] | Feature list |
button | { label } | Call-to-action |
popular | boolean | Highlight and badge this plan |
Events
| Event | Payload | Description |
|---|---|---|
select | PricingPlan | A plan's button was clicked |
AI Context
component: XAFPricingPlans
package: "@xenterprises/nuxt-x-affiliate"
use-when: Pricing plan cards for a reviewed subscription product