PricePlan

GitHub à
Un plan de tarification personnalisable à afficher dans une page de tarification.

Utilisation

Le composant Pricing Plan offre un moyen flexible d'afficher un plan de tarification avec un contenu personnalisable, y compris le titre, la description, le prix, les fonctionnalités, etc.

Solo
Most popular
For bootstrappers and indie hackers.
$249
$199
 /month
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
Utilisez le composant PricingPlans pour afficher plusieurs plans tarifaires dans une mise en page de grille réactive.

Titre

Utilisez la prop title pour définir le titre du plan de prix.

Solo
<template>
  <UPricingPlan title="Solo" class="w-96" />
</template>

Description

Utilisez la prop description pour définir la description du plan de prix.

Solo
For bootstrappers and indie hackers.
<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>

badge référence

Utilisez la prop badge pour afficher un Badge à côté du titre du plan de prix.

Solo
Most popular
For bootstrappers and indie hackers.
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    badge="Most popular"
  />
</template>

Vous pouvez passer n'importe quelle propriété du composant Badge pour le personnaliser.

Solo
Most popular
For bootstrappers and indie hackers.
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    :badge="{
      label: 'Most popular',
      color: 'neutral',
      variant: 'solid'
    }"
  />
</template>

Prix

Utilisez le prop price pour définir le prix du plan de prix.

Solo
For bootstrappers and indie hackers.
$249
<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>

Discount

Utilisez le prop discount pour définir un prix réduit qui sera affiché à côté du prix d'origine (qui sera affiché avec une barre).

Solo
For bootstrappers and indie hackers.
$249
$199
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    discount="$199"
  />
</template>

Facturation

Utilisez les accessoires billing-cycle et/ou billing-period pour afficher les informations de facturation du plan de prix.

Solo
For bootstrappers and indie hackers.
$9
billed annually/month
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$9"
    billing-cycle="/month"
    billing-period="billed annually"
  />
</template>

Caractéristiques

Utilisez le prop features comme tableau de chaînes pour afficher une liste de fonctionnalités sur le plan de prix:

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
  />
</template>
Vous pouvez personnaliser cette icône globalement dans votre app.config.ts sous la touche ui.icons.success.
Vous pouvez personnaliser cette icône globalement dans votre vite.config.ts sous la touche ui.icons.success.

Vous pouvez également passer un tableau d'objets avec les propriétés suivantes:

  • xtitle: stringx{lang="ts-type"}
  • xicon?: stringx{lang="ts-type"}
Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<script setup lang="ts">
import type { PricingPlanFeature } from '@nuxt/ui'

const features = ref<PricingPlanFeature[]>([
  {
    title: 'One developer',
    icon: 'i-lucide-user'
  },
  {
    title: 'Unlimited projects',
    icon: 'i-lucide-infinity'
  },
  {
    title: 'Access to GitHub repository',
    icon: 'i-lucide-github'
  },
  {
    title: 'Unlimited patch & minor updates',
    icon: 'i-lucide-refresh-cw'
  },
  {
    title: 'Lifetime access',
    icon: 'i-lucide-clock'
  }
])
</script>

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanFeature } from '@nuxt/ui'

const features = ref<PricingPlanFeature[]>([
  {
    title: 'One developer',
    icon: 'i-lucide-user'
  },
  {
    title: 'Unlimited projects',
    icon: 'i-lucide-infinity'
  },
  {
    title: 'Access to GitHub repository',
    icon: 'i-lucide-github'
  },
  {
    title: 'Unlimited patch & minor updates',
    icon: 'i-lucide-refresh-cw'
  },
  {
    title: 'Lifetime access',
    icon: 'i-lucide-clock'
  }
])
</script>

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

Bouton

Utilisez la prop button avec n'importe quelle propriété du composant Button pour afficher un bouton en bas du plan de prix.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
  />
</template>
Utilisez le champ onClick pour ajouter un gestionnaire de clics pour déclencher l'achat du plan.

Variant équivalent

Utilisez le prop variant pour modifier la variante du plan de prix.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    variant="subtle"
  />
</template>

Orientation

Utilisez la prop orientation pour modifier l'orientation de l'option. Defaults sur vertical.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
$249
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    variant="outline"
  />
</template>

Télécharger

Utilisez le prop tagline pour afficher un texte de slogan au-dessus du prix.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
Pay once, own it forever
$249
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    tagline="Pay once, own it forever"
  />
</template>

Terms

Utilisez le prop terms pour afficher les termes en dessous du prix.

Solo
For bootstrappers and indie hackers.
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Lifetime access
Pay once, own it forever
$249
Invoices and receipts available.
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    tagline="Pay once, own it forever"
    terms="Invoices and receipts available."
  />
</template>

highlight

Utilisez le prop highlight pour afficher une bordure en surbrillance autour du plan de prix.

Solo
For bootstrappers and indie hackers.
$249
  • One developer
  • Unlimited projects
  • Access to GitHub repository
  • Unlimited patch & minor updates
  • Lifetime access
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    highlight
  />
</template>

échelle

Utilisez le prop scale pour rendre un plan de prix plus grand que les autres.

Consultez l'exemple scale de PricingPlans pour voir comment cela fonctionne, car il est difficile de le démontrer par lui-même.

API

Props équipements

Prop Default Type
as
'div'
any

The element or component this component should render as.

title
string
description
string
badge
string | BadgeProps

Display a badge next to the title. Can be a string or an object. { color: 'primary', variant: 'subtle' }

billingCycle
string

The unit price period that appears next to the price. Typically used to show the recurring interval.

billingPeriod
string

Additional billing context that appears above the billing cycle. Typically used to show the actual billing frequency.

price
string

The current price of the plan. When used with discount, this becomes the original price.

discount
string

The discounted price of the plan. When provided, the price prop will be displayed as strikethrough.

features
string[] | PricingPlanFeature[]

Display a list of features under the price. Can be an array of strings or an array of objects.

button
ButtonProps

Display a buy button at the bottom. { size: 'lg', block: true } Use the onClick field to add a click handler.

tagline
string

Display a tagline highlighting the pricing value proposition.

terms
string

Display terms at the bottom.

orientation
'vertical'
"vertical" | "horizontal"

The orientation of the pricing plan.

variant
'outline'
"soft" | "solid" | "outline" | "subtle"
highlight
boolean

Display a ring around the pricing plan to highlight it.

scale
boolean

Enlarge the plan to make it more prominent.

ui
{ root?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; titleWrapper?: SlotClass; title?: SlotClass; description?: SlotClass; priceWrapper?: SlotClass; price?: SlotClass; discount?: SlotClass; billing?: SlotClass; billingPeriod?: SlotClass; billingCycle?: SlotClass; features?: SlotClass; feature?: SlotClass; featureIcon?: SlotClass; featureTitle?: SlotClass; badge?: SlotClass; button?: SlotClass; tagline?: SlotClass; terms?: SlotClass; }

Slots

Slot Type
badge
{ ui: object; }
title
{}
description
{}
price
{}
discount
{}
billing
{ ui: object; }
features
{}
button
{ ui: object; }
header
{}
body
{}
footer
{}
tagline
{}
terms
{}

Thème

app.config.ts
export default defineAppConfig({
  ui: {
    pricingPlan: {
      slots: {
        root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
        header: '',
        body: 'flex flex-col min-w-0',
        footer: 'flex flex-col gap-6 items-center',
        titleWrapper: 'flex items-center gap-3',
        title: 'text-highlighted truncate text-2xl sm:text-3xl text-pretty font-semibold',
        description: 'text-muted text-base text-pretty mt-2',
        priceWrapper: 'flex items-center gap-1',
        price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
        discount: 'text-muted line-through text-xl sm:text-2xl',
        billing: 'flex flex-col justify-between min-w-0',
        billingPeriod: 'text-toned truncate text-xs font-medium',
        billingCycle: 'text-muted truncate text-xs font-medium',
        features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
        feature: 'flex items-center gap-2 min-w-0',
        featureIcon: 'size-5 shrink-0 text-primary',
        featureTitle: 'text-muted text-sm truncate',
        badge: '',
        button: '',
        tagline: 'text-base font-semibold text-default',
        terms: 'text-xs/5 text-muted text-center text-balance'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
            body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pe-6 justify-center',
            footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
            features: 'lg:grid lg:grid-cols-2 lg:mt-12'
          },
          vertical: {
            footer: 'justify-end',
            priceWrapper: 'mt-6'
          }
        },
        variant: {
          solid: {
            root: 'bg-inverted',
            title: 'text-inverted',
            description: 'text-dimmed',
            price: 'text-inverted',
            discount: 'text-dimmed',
            billingCycle: 'text-dimmed',
            billingPeriod: 'text-dimmed',
            featureTitle: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default'
          },
          soft: {
            root: 'bg-elevated/50'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default'
          }
        },
        highlight: {
          true: {
            root: 'ring-2 ring-inset ring-primary'
          }
        },
        scale: {
          true: {
            root: 'lg:scale-[1.1] lg:z-[1]'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          variant: 'soft',
          class: {
            root: 'divide-accented'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'subtle',
          class: {
            root: 'divide-accented'
          }
        }
      ],
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pricingPlan: {
          slots: {
            root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
            header: '',
            body: 'flex flex-col min-w-0',
            footer: 'flex flex-col gap-6 items-center',
            titleWrapper: 'flex items-center gap-3',
            title: 'text-highlighted truncate text-2xl sm:text-3xl text-pretty font-semibold',
            description: 'text-muted text-base text-pretty mt-2',
            priceWrapper: 'flex items-center gap-1',
            price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
            discount: 'text-muted line-through text-xl sm:text-2xl',
            billing: 'flex flex-col justify-between min-w-0',
            billingPeriod: 'text-toned truncate text-xs font-medium',
            billingCycle: 'text-muted truncate text-xs font-medium',
            features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
            feature: 'flex items-center gap-2 min-w-0',
            featureIcon: 'size-5 shrink-0 text-primary',
            featureTitle: 'text-muted text-sm truncate',
            badge: '',
            button: '',
            tagline: 'text-base font-semibold text-default',
            terms: 'text-xs/5 text-muted text-center text-balance'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
                body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pe-6 justify-center',
                footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
                features: 'lg:grid lg:grid-cols-2 lg:mt-12'
              },
              vertical: {
                footer: 'justify-end',
                priceWrapper: 'mt-6'
              }
            },
            variant: {
              solid: {
                root: 'bg-inverted',
                title: 'text-inverted',
                description: 'text-dimmed',
                price: 'text-inverted',
                discount: 'text-dimmed',
                billingCycle: 'text-dimmed',
                billingPeriod: 'text-dimmed',
                featureTitle: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default'
              },
              soft: {
                root: 'bg-elevated/50'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default'
              }
            },
            highlight: {
              true: {
                root: 'ring-2 ring-inset ring-primary'
              }
            },
            scale: {
              true: {
                root: 'lg:scale-[1.1] lg:z-[1]'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              variant: 'soft',
              class: {
                root: 'divide-accented'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'subtle',
              class: {
                root: 'divide-accented'
              }
            }
          ],
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Changelog écrit

No recent changes

PageSection

A responsive section for your pages.

PricingPlans

Display a list of pricing plans in a responsive grid layout.