Skip to content

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.

ComponentDescription
ProductPlansThe root component element
ProductPlanThe wrapper element for a single product plan
ProductPlanNameThe element that contains the product name
ProductPlanDescThe element that contains the product description
ProductPlanPriceThe element that contains the product price
ProductPlanFeaturesThe element that displays the list of features
ProductPlanActionThe 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

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.product-plansthe class applied to the root element

ProductPlanName

Component Props

PropDescriptionOptions
namethe name of the product
asthe type of HTML element to render as

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.product-plan-namethe class applied to the root element

ProductPlanDesc

Component Props

PropDescriptionOptions
descriptionthe product description
asthe type of HTML element to render as

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.product-plan-descthe class applied to the root element

ProductPlanPrice

Component Props

PropDescriptionOptions
pricethe product price
billed_unitthe units the product is priced at. For example, monthly or annually
asthe type of HTML element to render as

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.product-plan-pricethe class applied to the root element

ProductPlanFeatures

Component Props

PropDescriptionOptions
featuresan array of feature objects with name props for each feature

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.product-plan-featuresthe class applied to the root element
.product-plan-featurethe class applied to the each feature element

ProductPlanAction

Component Props

PropDescriptionOptions
labelthe button text label

Component Events

EventDescriptionArgs
product-action:clickemits when the button element is clicked

CSS Classes

ClassDescription
.product-plan-actionthe class applied to the root element