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)
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>
Name | Description | Props |
---|---|---|
default | {} |
Name | Type | Default | Description |
---|---|---|---|
ui | DeepPartial<{ wrapper: string; }> | {} | |
compact | boolean | false |
{
wrapper: 'flex flex-col lg:grid lg:grid-cols-3 w-full justify-center items-center gap-8'
}