​
Pricing component

To render pricing tables you can use the main component resources/js/Components/Sections/Pricing/Pricing.vue, which will handle the data in the background. The payment prop is fetched from HomepageController to resources/js/Pages/Index.vue page (view file for index page aka homepage). 
<Pricing :data="payment" />
Auto variant will render pricing tables according to the number of plans. For one plan it will render Single product table, for two plans Dual products table and for 3 or more Default pricing tables. Default variant will always render Default pricing tables regardless of number of plans.

​
Pricing table components

You can also use specific components, instead of the main Pricing component. Just follow the links below to see how.
All components work with monthly/yearly subscription plans.

Default pricing

Simple pricing tables.

Single product

Pricing table adjusted for one plan.

Dual products

Pricing tables adjusted for two plans.

With features

Pricing tables with features table to compare plans.