料金プラン

サイトマップ

価格ページに表示されるカスタマイズ可能な価格プラン。

使用法

PricingPlanコンポーネントは、タイトル、説明、価格、機能などのカスタマイズ可能なコンテンツを含む価格プランを柔軟に表示する方法を提供します。

Solo

Title

titleプロパティを使用してPricingPlanのタイトルを設定します。

title

Solo

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

Description

descriptionプロパティを使用してPricingPlanの説明を設定します。

description

Solo

For bootstrappers and indie hackers.

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

バッジ

badgeプロパティを使用して、PricingPlanのタイトルの横にBadgeを表示します。

badge

Solo

価格

priceプロパティを使用してPricingPlanの価格を設定します。

price

Solo

For bootstrappers and indie hackers.

$249

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

割引

discountプロップを使用して、元の価格（ストライクスルーで表示されます）と一緒に表示される割引価格を設定します。

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

billing-cycleおよび/またはbilling-period小道具を使用して、PricingPlanの請求情報を表示します。

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>

機能

PricingPlanに機能のリストを表示するには、featuresプロパティを文字列の配列として使用します。

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>

このアイコンはapp.config.tsのui.icons.successキーでグローバルにカスタマイズできます。

このアイコンはvite.config.tsのui.icons.successキーでグローバルにカスタマイズできます。

次のプロパティを持つオブジェクトの配列を渡すこともできます：

title: string
icon?: string

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

PricingPlanの下部にボタンを表示するには、Buttonコンポーネントの任意のプロパティを指定してbuttonプロパティを使用します。

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>

onClick項目を使用して、プラン購入をトリガーするクリックハンドラーを追加します。

Variant

variantプロパティを使用して、PricingPlanのバリアントを変更します。

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>

Orientation

orientationプロパティを使用してPricingPlanの向きを変更します。デフォルトはverticalです。

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

taglineプロパティを使用して、価格の上にタグラインテキストを表示します。

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

termsプロパティを使用して、価格以下の用語を表示します。

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プロパティを使用して、PricingPlanの周りにハイライトされた境界線を表示します。

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>

Scale

scaleプロパティを使用して、PricingPlanを他よりも大きくします。

PricingPlansのscaleの例をチェックして、それだけではデモンストレーションするのは難しいので、どのように動作するかを確認してください。

API

Props

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; }`

スロット

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

Theme

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

No recent changes

PageSection

A responsive section for your pages.

PricingPlans

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