Nuxt UI v3-alpha has been released!

Try it out

PricingGrid

A customizable grid for your PricingCard components.
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.

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

ui
DeepPartial<{ wrapper: string; }>
{}
compact
boolean
false

Config

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