Appearance
ProductPlan
The ProductPlan
component is a set of composable components used together to create a classic pricing page.
Composable Components
The ProductPlan is made up of several components that allow you to compose different types of product plan layouts.
Component | Description |
---|---|
ProductPlans | The root component element |
ProductPlan | The wrapper element for a single product plan |
ProductPlanName | The element that contains the product name |
ProductPlanDesc | The element that contains the product description |
ProductPlanPrice | The element that contains the product price |
ProductPlanFeatures | The element that displays the list of features |
ProductPlanAction | The trigger button for the product selection event. |
Examples
js
const products = ref([]) // this can come from your database or from stripe, etc
html
<ProductPlans class="mt-20">
<template v-for="(product, i) in products" :key="i">
<ProductPlan
class="relative"
:class="{ 'popular-border': product.metadata.popular === 'true' }"
>
<ProductPlanName :name="product.name" />
<span v-if="product.metadata.popular === 'true'" class="popular">
Most Popular
</span>
<ProductPlanPrice :price="product.prices[0].unit_amount / 100" />
<ProductPlanDesc :description="product.description" />
<ProductPlanFeatures :features="product.marketing_features" />
<ProductPlanAction
@product-action:click="handleProductClick(product)"
class="btn-primary w-full"
label="Purchase"
/>
</ProductPlan>
</template>
</ProductPlans>
A working example of this can be in /frontend/views/PricingPlansView.vue
.
ProductPlans
Component Props
Prop | Description | Options |
---|---|---|
-- |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.product-plans | the class applied to the root element |
ProductPlanName
Component Props
Prop | Description | Options |
---|---|---|
name | the name of the product | |
as | the type of HTML element to render as |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.product-plan-name | the class applied to the root element |
ProductPlanDesc
Component Props
Prop | Description | Options |
---|---|---|
description | the product description | |
as | the type of HTML element to render as |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.product-plan-desc | the class applied to the root element |
ProductPlanPrice
Component Props
Prop | Description | Options |
---|---|---|
price | the product price | |
billed_unit | the units the product is priced at. For example, monthly or annually | |
as | the type of HTML element to render as |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.product-plan-price | the class applied to the root element |
ProductPlanFeatures
Component Props
Prop | Description | Options |
---|---|---|
features | an array of feature objects with name props for each feature |
Component Events
Event | Description | Args |
---|---|---|
-- |
CSS Classes
Class | Description |
---|---|
.product-plan-features | the class applied to the root element |
.product-plan-feature | the class applied to the each feature element |
ProductPlanAction
Component Props
Prop | Description | Options |
---|---|---|
label | the button text label |
Component Events
Event | Description | Args |
---|---|---|
product-action:click | emits when the button element is clicked |
CSS Classes
Class | Description |
---|---|
.product-plan-action | the class applied to the root element |