PricePlans

GitHub también
Mostrar una lista de planes de precios en un diseño de cuadrícula sensible.

xph0000xUso

El componente PricingPlans proporciona un diseño flexible para mostrar una lista de componentes PricingPlan utilizando la ranura predeterminada o la prop. plans.

<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="(plan, index) in plans"
      :key="index"
      v-bind="plan"
    />
  </UPricingPlans>
</template>
Las columnas de la cuadrícula se calcularán automáticamente en función del número de planos, esto funciona con el accesorio plans pero también con la ranura predeterminada.

Proyectos

Utilice el prop plans como una matriz de objetos con las propiedades del componente 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>

Orientación

Utilice el prop orientation para cambiar la orientación de los planes de precios. Predeterminados a 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>
Cuando se utiliza el accesorio plans en lugar de la ranura predeterminada, el orientation de los planes se invierte automáticamente, de horizontal a vertical y viceversa.

Compact (Edición española)

Utilice el accesorio compact para reducir el relleno entre los planos cuando uno de los planos se escala para un mejor equilibrio visual.

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 (Edición española)

Utilice el soporte scale para ajustar el espaciado entre los planos cuando uno de los planos se escala para un mejor equilibrio visual.

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>

Ejemplos

Si bien estos ejemplos utilizan Nuxt Content, los componentes se pueden integrar con cualquier sistema de gestión de contenido.

En una página

Utilice el componente Planes de precios en una página para crear una página de precios:

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>
En este ejemplo, los plans se obtienen utilizando queryCollection desde el módulo @nuxt/content.

API

Props (accesorios)

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
{}

Temas

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 (Edición española)

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.