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.

<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

Name	Description	Props
default		{}

Props

Name	Type	Default	Description
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'
}