Preisplan

Ein anpassbarer Preisplan, der auf einer Preisseite angezeigt wird.

Bearbeiten

Die PricingPlan-Komponente bietet eine flexible Möglichkeit, einen Preisplan mit anpassbaren Inhalten wie Titel, Beschreibung, Preis, Funktionen usw. anzuzeigen.

Solo

Beschreibung

Verwenden Sie die description-prop, um die Beschreibung des PricingPlan festzulegen.

description

Solo

For bootstrappers and indie hackers.

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

Badge Bearbeiten

Verwenden Sie die badge-Prop, um ein Badge neben dem Titel des PricingPlans anzuzeigen.

badge

Solo

Price

Verwenden Sie die price-Prop, um den Preis des PricingPlan festzulegen.

price

Solo

For bootstrappers and indie hackers.

$249

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

Discount (englisch)

Verwenden Sie die discount-Prop, um einen ermäßigten Preis festzulegen, der neben dem ursprünglichen Preis angezeigt wird (der mit einem Durchstreichen angezeigt wird).

price

discount

Solo

For bootstrappers and indie hackers.

$249

$199

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

Billing (englisch)

Verwenden Sie die billing-cycle und/oder billing-period Requisiten, um die Rechnungsinformationen des PricingPlan anzuzeigen.

price

billingCycle

billingPeriod

Solo

For bootstrappers and indie hackers.

billed annually/month

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

Features Bearbeiten

Verwenden Sie die features prop als Array von String, um eine Liste von Funktionen auf dem PricingPlan anzuzeigen:

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>

Sie können dieses Symbol global in Ihrem app.config.ts unter ui.icons.success Schlüssel anpassen.

Sie können dieses Symbol global in Ihrem vite.config.ts unter ui.icons.success Schlüssel anpassen.

Sie können auch ein Array von Objekten mit den folgenden Eigenschaften übergeben:

title: string (englisch)
icon?: string (englisch)

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>

Button (englisch)

Verwenden Sie die button-Prop mit einer beliebigen Eigenschaft aus der Komponente Button, um eine Schaltfläche am unteren Rand des Preisplans anzuzeigen.

button.label

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>

Verwenden Sie das Feld onClick, um einen Klick-Handler hinzuzufügen, um den Plankauf auszulösen.

Variant Bearbeiten

Verwenden Sie die variant-prop, um die Variante des PricingPlan zu ändern.

variant

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>

Orientierung.

Verwenden Sie die orientation-prop, um die Ausrichtung der PricingPlan. Defaults auf vertical zu ändern.

orientation

variant

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>

Tagline (englisch)

Verwenden Sie die tagline-Stütze, um einen Tagline-Text über dem Preis anzuzeigen.

tagline

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 (englisch)

Verwenden Sie die terms-Prop, um Begriffe unter dem Preis anzuzeigen.

terms

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

Verwenden Sie die highlight-Prop, um einen hervorgehobenen Rahmen um den PricingPlan anzuzeigen.

highlight

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>

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 Bearbeiten

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

Theme Bearbeiten

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 (englisch)

No recent changes

PageSection

A responsive section for your pages.

PricingPlans

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

Preisplan

Bearbeiten

Beschreibung

Badge Bearbeiten

Price

Discount (englisch)

Billing (englisch)

Features Bearbeiten

Button (englisch)

Variant Bearbeiten

Orientierung.

Tagline (englisch)

Terms (englisch)

Highlight

Scale ist ein

API Bearbeiten

Props Bearbeiten

Slots Bearbeiten

Theme Bearbeiten

Changelog (englisch)