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
falseConfig
{
wrapper: 'flex flex-col lg:grid lg:grid-cols-3 w-full justify-center items-center gap-8'
}