nuxt-x-affiliate
Pricing Comparison
Feature-by-feature comparison table across several plans, grouped into sections.
Pricing Comparison
A feature-by-feature comparison across several plans, grouped into sections.
An adapter over Nuxt UI's <UPricingTable>; what it adds is the readable input
shape — plans keyed by id, features grouped into sections, each feature carrying
a values map of planId → boolean | string.
For a "which plan should I buy" page this usually outperforms prose.
Components
<XAFPricingComparison />
<XAFPricingComparison
:plans="plans"
:feature-groups="groups"
caption="Plan comparison"
:badges="['money-back']"
/>
<script setup>
const plans = [
{ id: 'starter', name: 'Starter', price: '$9/mo', button: { label: 'Get Started' } },
{ id: 'pro', name: 'Pro', price: '$29/mo', highlighted: true, button: { label: 'Get Pro' } },
]
const groups = [
{
name: 'Core',
features: [
{ name: 'Projects', values: { starter: '5', pro: 'Unlimited' } },
{ name: 'Priority support', values: { starter: false, pro: true } },
],
},
]
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | ComparisonPlan[] | required | Table columns |
featureGroups | FeatureGroup[] | required | Grouped rows |
caption | string | — | Table caption, read before the table |
badges | Badge[] | [] | Trust badges above or below the table |
badgesPosition | 'top' | 'bottom' | 'bottom' | Badge row position |
badgesAlign | 'left' | 'center' | 'right' | 'center' | Badge row alignment |
ComparisonPlan object
| Key | Type | Description |
|---|---|---|
id | string | Stable key referenced by each feature's values map |
name | string | Column heading |
price | string | Price line |
description | string | Line under the name |
highlighted | boolean | Emphasise this column |
button | { label } | Column call-to-action |
FeatureGroup object
| Key | Type | Description |
|---|---|---|
name | string | Section heading. Omit for an ungrouped run |
features | { name, values }[] | Rows. values maps planId to boolean | string |
Events
| Event | Payload | Description |
|---|---|---|
select | ComparisonPlan | A column's button was clicked |
Tips
- The table scrolls inside its own container on narrow screens rather than forcing the page to scroll horizontally.
AI Context
component: XAFPricingComparison
package: "@xenterprises/nuxt-x-affiliate"
use-when: Feature-by-feature plan comparison table