PricingGrid - Nuxt UI Pro

Take a look at the SaaS template to see how you can build your own pricing page! (view source)

Usage

Use some PricingCard to display pricing plans side by side.

compact

Free

Get started for free in development.

Solo

For bootstrappers and indie hackers.

$199

Team

Unlimited license for growing teams.

$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>

This component can be put directly inside a LandingSection with its content fetched from @nuxt/content easily:

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

We're using .yml files as an example here but you can use any format supported by @nuxt/content like .md or .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>

Slots

default

{}

Props

{}

{}

compact

boolean

false

Config

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

PricingCard

A pre-built Card with all you need to display a pricing plan.

PricingToggle

A customizable Toggle to switch the payment frequency.