PricePlans

GitHub à
Affichez une liste de plans tarifaires dans une mise en page de grille réactive.

Utilisation

Le composant PricingPlans fournit une disposition flexible pour afficher une liste de composants PricingPlan en utilisant soit l'emplacement par défaut, soit le prop plans.

<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="(plan, index) in plans"
      :key="index"
      v-bind="plan"
    />
  </UPricingPlans>
</template>
Les colonnes de la grille seront automatiquement calculées en fonction du nombre de plans, cela fonctionne avec le prop plans mais aussi avec le slot par défaut.

Plans

Utilisez la prop plans comme un tableau d'objets avec les propriétés du composant PricingPlan.

Solo
Tailored for indie hackers.
$249
  • One developer
  • Lifetime access
Startup
Best suited for small teams.
$499
  • Up to 5 developers
  • Everything in Solo
Organization
Ideal for larger teams and organizations.
$999
  • Up to 20 developers
  • Everything in Startup
<script setup lang="ts">
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans :plans="plans" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans :plans="plans" />
</template>

Référencement

Utilisez la prop orientation pour modifier l'orientation des prix. Defaults sur horizontal.

Solo
Tailored for indie hackers.
  • One developer
  • Lifetime access
$249
Startup
Best suited for small teams.
  • Up to 5 developers
  • Everything in Solo
$499
Organization
Ideal for larger teams and organizations.
  • Up to 20 developers
  • Everything in Startup
$999
<script setup lang="ts">
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans orientation="vertical" :plans="plans" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans orientation="vertical" :plans="plans" />
</template>
Lorsque vous utilisez le prop plans au lieu de l'emplacement par défaut, le orientation des plans est automatiquement inversé, de horizontal à vertical et vice versa.

Compact équipement

Utilisez le prop compact pour réduire le rembourrage entre les plans lorsque l'un des plans est mis à l'échelle pour un meilleur équilibre visuel.

Solo
Tailored for indie hackers.
$249
  • One developer
  • Lifetime access
Startup
Best suited for small teams.
$499
  • Up to 5 developers
  • Everything in Solo
Organization
Ideal for larger teams and organizations.
$999
  • Up to 20 developers
  • Everything in Startup
<script setup lang="ts">
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    scale: true,
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans compact :plans="plans" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    scale: true,
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans compact :plans="plans" />
</template>

Scale

Utilisez le prop scale pour ajuster l'espacement entre les plans lorsque l'un des plans est mis à l'échelle pour un meilleur équilibre visuel.

Solo
Tailored for indie hackers.
$249
  • One developer
  • Lifetime access
Startup
Best suited for small teams.
$499
  • Up to 5 developers
  • Everything in Solo
Organization
Ideal for larger teams and organizations.
$999
  • Up to 20 developers
  • Everything in Startup
<script setup lang="ts">
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    scale: true,
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans scale :plans="plans" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanProps } from '@nuxt/ui'

const plans = ref<PricingPlanProps[]>([
  {
    title: 'Solo',
    description: 'Tailored for indie hackers.',
    price: '$249',
    features: [
      'One developer',
      'Lifetime access'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Startup',
    description: 'Best suited for small teams.',
    price: '$499',
    scale: true,
    features: [
      'Up to 5 developers',
      'Everything in Solo'
    ],
    button: {
      label: 'Buy now'
    }
  },
  {
    title: 'Organization',
    description: 'Ideal for larger teams and organizations.',
    price: '$999',
    features: [
      'Up to 20 developers',
      'Everything in Startup'
    ],
    button: {
      label: 'Buy now'
    }
  }
])
</script>

<template>
  <UPricingPlans scale :plans="plans" />
</template>

exemples

Bien que ces exemples utilisent Nuxt Content, les composants peuvent être intégrés à n'importe quel système de gestion de contenu.

Dans une page

Utilisez le composant Fixation des prix dans une page pour créer une page de tarification:

pages/pricing/index.vue
<script setup lang="ts">
const { data: plans } = await useAsyncData('plans', () => queryCollection('plans').all())
</script>

<template>
  <UPage>
    <UPageHero title="Pricing" />

    <UPageBody>
      <UContainer>
        <UPricingPlans :plans="plans" />
      </UContainer>
    </UPageBody>
  </UPage>
</template>
Dans cet exemple, les plans sont récupérés à l'aide de queryCollection à partir du module @nuxt/content.

API

Props and

Prop Default Type
as
'div'
any

The element or component this component should render as.

plans
PricingPlanProps[]
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the pricing plans.

compact
false
boolean

When true, the plans will be displayed without gap.

scale
false
boolean

When true, the plans will be displayed with a larger gap. Useful when one plan is scaled. Doesn't work with compact.

ui
{ base?: any; }

Slots

Slot Type
badge
{ ui: object; }
title
{}
description
{}
price
{}
discount
{}
billing
{ ui: object; }
features
{}
button
{ ui: object; }
header
{}
body
{}
footer
{}
tagline
{}
terms
{}
default
{}

Thème

app.config.ts
export default defineAppConfig({
  ui: {
    pricingPlans: {
      base: 'flex flex-col gap-y-8',
      variants: {
        orientation: {
          horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
          vertical: ''
        },
        compact: {
          false: 'gap-x-8'
        },
        scale: {
          true: ''
        }
      },
      compoundVariants: [
        {
          compact: false,
          scale: true,
          class: 'lg:gap-x-13'
        }
      ]
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pricingPlans: {
          base: 'flex flex-col gap-y-8',
          variants: {
            orientation: {
              horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
              vertical: ''
            },
            compact: {
              false: 'gap-x-8'
            },
            scale: {
              true: ''
            }
          },
          compoundVariants: [
            {
              compact: false,
              scale: true,
              class: 'lg:gap-x-13'
            }
          ]
        }
      }
    })
  ]
})

Changelog

No recent changes

PricingPlan

A customizable pricing plan to display in a pricing page.

PricingTable

A responsive pricing table component that displays tiered pricing plans with feature comparisons.