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>
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
{}
{}
compact
boolean
false