价格网格 - Nuxt UI Pro

看看SaaS 模板，了解如何构建自己的价格页面！ (查看源代码)

用法

使用一些价格卡片侧边显示价格方案。

紧凑

免费

在开发中免费开始。

独奏

面向引导程序和独立黑客。

$199

团队

面向不断发展的团队的无限许可。

$699

<template>
  <UPricingGrid :compact="false">
    <UPricingCard
      title="Free"
      description="Get started for free in development."
    />
    <UPricingCard
      title="Solo"
      description="For bootstrappers and indie hackers."
      price="$199"
      scale
      highlight
    />
    <UPricingCard
      title="Team"
      description="Unlimited license for growing teams."
      price="$699"
    />
  </UPricingGrid>
</template>

此组件可以直接放在登录页面部分中，其内容可以轻松地从@nuxt/content 中获取。

content/index.yml

pricing:
  title: Pricing
  description: Choose the plan that works for you.
  plans:
    - title: Free
      description: Get started for free in development.
    - title: Solo
      description: For bootstrappers and indie hackers.
      price: $199
      scale: true
      highlight: true
    - title: Team
      description: Unlimited license for growing teams.
      price: $699

这里我们使用.yml 文件作为示例，但您可以使用@nuxt/content 支持的任何格式，如.md 或.json。

pages/index.vue

<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>

<template>
  <ULandingSection :title="page.pricing.title" :description="page.pricing.description">
    <UPricingGrid>
      <UPricingCard v-for="(plan, index) in page.pricing.plans" :key="index" v-bind="plan" />
    </UPricingGrid>
  </ULandingSection>
</template>

插槽

默认

{}

道具

DeepPartial<{ wrapper: string; }>

{}

紧凑

布尔值

false

配置

{
  wrapper: 'flex flex-col lg:grid lg:grid-cols-3 w-full justify-center items-center gap-8'
}

价格卡片

一个预建的卡片，包含显示价格方案所需的一切。

价格切换

一个可自定义的切换，用于切换付款频率。