Pricing

ConvertPricing — comparison pricing grids with external CTAs.

Basic Usage

Display a pricing comparison grid:

<ConvertPricing :options="pricingOptions" />

Props

Prop	Type	Description
`options`	`BookingOption[]`	required — Array of pricing tier objects

BookingOption Shape

Field	Type	Required	Description
`url`	`string`	Yes	External payment/booking URL
`title`	`string`	Yes	Tier name
`price`	`string`	Yes	Display price (e.g., `"$49"`)
`originalPrice`	`string`	No	Strikethrough price
`priceNote`	`string`	No	Price annotation (e.g., `"per month"`)
`priceInterval`	`string`	No	Billing interval
`description`	`string`	Yes	Short tier description
`badge`	`string`	No	Badge text (e.g., `"Popular"`)
`location`	`string`	Yes	Tracking location identifier
`buttonLabel`	`string`	No	CTA button text
`buttonVariant`	`string`	No	`'solid'`, `'outline'`, `'soft'`, `'subtle'`
`buttonColor`	`string`	No	`'primary'`, `'secondary'`, `'neutral'`
`highlighted`	`boolean`	No	Emphasize this tier
`features`	`string[] \| object[]`	No	Feature list items

Example

<ConvertPricing
  :options="[
    {
      url: 'https://buy.stripe.com/basic',
      title: 'Basic',
      price: '$29',
      description: 'Perfect for getting started.',
      location: 'pricing-basic',
      features: ['Email capture', 'Landing page', 'Webhook delivery'],
    },
    {
      url: 'https://buy.stripe.com/pro',
      title: 'Pro',
      price: '$79',
      originalPrice: '$149',
      priceNote: 'one-time',
      description: 'Everything you need to validate.',
      badge: 'Best Value',
      location: 'pricing-pro',
      highlighted: true,
      buttonColor: 'primary',
      features: [
        'Everything in Basic',
        '1-on-1 mentorship session',
        'Custom analytics setup',
        'Priority support',
      ],
    },
  ]"
/>

How It Works

ConvertPricing wraps Nuxt UI's UPricingPlans and UPricingPlan components, with each tier's CTA rendered as a ConvertExternal button. This means every tier click:

Opens the external payment URL
Fires an offer_click event with the tier's location
Is tracked independently from other tiers

Features List

Features can be simple strings or objects with icons:

// Simple strings
features: ['Feature one', 'Feature two']

// With icons
features: [
  { title: 'Unlimited projects', icon: 'i-lucide-infinity' },
  { title: '24/7 support', icon: 'i-lucide-headphones' },
]

Internal Offers

ConvertInternal — link to offer detail pages within your site.

Social & Sharing

ConvertSocial, ConvertSocialShare, and ConvertRss — social proof and distribution components.