VILT Components
Plans
import Plans from @/Components/Plans.vue;
To display plans dynamically, use LemonSqueezyService to retrieve products.
Example:
app/Services/LemonSqueezyService.php
$products = Cache::rememberForever('lemonsqueezy-products', static fn () => app(LemonSqueezyService::class)->products());
$products = collect($products['data'])->filter(fn ($product) => $product['attributes']['status'] === 'published')
->sortByDesc(fn ($product) => $product['attributes']['price'])
->map(function ($product) {
$attributes = $product['attributes'];
$price = (int) $attributes['price'] / 100;
$plan = match($attributes['name']) {
'Full Package' => 'full',
'Starter' => 'starter',
default => 'personal'
};
return [
'name' => $attributes['name'],
'slug' => $attributes['slug'],
'plan' => $plan,
'price' => $price,
'bestseller' => $attributes['name'] === 'Full Package',
'discounted_price' => $price - 100,
'url' => $attributes['buy_now_url'].'?checkout%5Bdiscount_code%5D=LAUNCH100OFF', // discount code attached to the checkout url
'features' => config('plans.' . $plan . '.features') //implement your features per plan
];
});
Vue component
resources/js/Components/Plans.vue
<div id="pricing" class="py-8 sm:py-16 px-8">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<p class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Choose Your Plan</p>
<p class="mt-6 text-lg leading-8">Select the perfect plan that fits your social media needs. Start with our <b>7</b> days free trial and upgrade anytime to unlock more powerful features</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 mx-auto max-w-6xl my-8">
<div v-for="plan in plans" class="px-8 py-12 border border-base-200 rounded-3xl shadow-xl hover:shadow-2xl cursor-pointer">
<p class="text-3xl font-extrabold mb-2">{{ plan.name }}</p>
<p class="mb-6">
<span>Best For: </span> <span>{{ plan.description }}</span></p>
<p class="mb-6">
<span class="text-4xl font-extrabold">${{ plan.price }}</span>
<span v-if="plan.price !== '0'" class="text-base font-medium">/{{ plan.interval }}</span>
</p>
<a v-if="plan.price !== '0'" :href="$page.props.auth.user ? route('stripe.subscription.checkout', {price: plan.slug}) : route('register')"
class="mb-6 btn btn-secondary btn-wide text-center mx-auto flex">
Choose Plan
</a>
<a v-else :href="route('register')"
class="mb-6 btn btn-secondary btn-wide text-center mx-auto flex">
Choose Plan
</a>
<p class="text-sm mb-4">*7 Days Free Trial</p>
<ul>
<li v-for="feature in plan.features" class="flex">
- {{ feature }}
</li>
</ul>
</div>
</div>
</div>