Frontend Frameworks
Vue 3, Nuxt 3 & Svelte 5 / SvelteKit Integration
Integrate dynamic purchasing power parity pricing into modern reactive Vue and Svelte applications with sub-10ms edge resolution.
Vue 3 Composable (useParityEdge)
Create a reusable composable for Vue 3 and Nuxt 3 that evaluates regional discounts and computes localized prices:
// composables/useParityEdge.ts
import { ref, computed, onMounted } from 'vue';
export interface ParityData {
eligible: boolean;
countryName: string;
countryCode: string;
currency?: { code: string; symbol: string };
discountPercentage: number;
couponCode: string;
}
export function useParityEdge(projectId: string = 'prj_live_YOUR_KEY') {
const parity = ref<ParityData | null>(null);
const loading = ref(true);
onMounted(async () => {
try {
const res = await fetch(
`https://api.parityedge.app/v1/lookup?pid=${encodeURIComponent(projectId)}`,
{ method: 'GET', mode: 'cors', credentials: 'omit' }
);
if (res.ok) {
parity.value = await res.json();
}
} catch {
parity.value = null;
} finally {
loading.value = false;
}
});
const getDiscountedPrice = (basePrice: number) => {
if (parity.value?.eligible && parity.value.discountPercentage > 0) {
const multiplier = (100 - parity.value.discountPercentage) / 100;
return Number((basePrice * multiplier).toFixed(2));
}
return basePrice;
};
return {
parity,
loading,
getDiscountedPrice,
};
}Vue 3 Pricing Card Component
<script setup lang="ts">
import { useParityEdge } from '@/composables/useParityEdge';
const { parity, loading, getDiscountedPrice } = useParityEdge('prj_live_YOUR_KEY');
const basePrice = 49.00;
</script>
<template>
<div class="p-6 rounded-2xl border border-border bg-card space-y-4">
<div v-if="parity?.eligible && parity.discountPercentage > 0" class="p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-xl text-emerald-600 dark:text-emerald-400 text-xs font-medium">
🎉 Special {{ parity.discountPercentage }}% discount for {{ parity.countryName }} visitors!
</div>
<div class="text-3xl font-extrabold text-foreground">
${{ getDiscountedPrice(basePrice) }} USD
</div>
<a
:href="'https://buy.stripe.com/sample?' + (parity?.couponCode ? 'prefilled_promo_code=' + parity.couponCode : '')"
class="block text-center py-2.5 px-4 rounded-xl bg-primary-600 text-white font-semibold text-xs"
>
Get Started
</a>
</div>
</template>Svelte 5 Runes ($state & $derived) Integration
<script lang="ts">
import { onMount } from 'svelte';
let parity = $state<{
eligible: boolean;
discountPercentage: number;
couponCode: string;
countryName: string;
} | null>(null);
const basePrice = 49.00;
const finalPrice = $derived(
parity?.eligible && parity.discountPercentage > 0
? (basePrice * (1 - parity.discountPercentage / 100)).toFixed(2)
: basePrice.toFixed(2)
);
onMount(async () => {
try {
const res = await fetch('https://api.parityedge.app/v1/lookup?pid=prj_live_YOUR_KEY', { credentials: 'omit' });
if (res.ok) parity = await res.json();
} catch (err) {
console.warn('[ParityEdge] lookup failed, showing default price:', err);
parity = null;
}
});
</script>
<div class="p-6 rounded-2xl border border-border bg-card space-y-3">
{#if parity?.eligible && parity.discountPercentage > 0}
<div class="p-2.5 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium">
🎉 {parity.discountPercentage}% discount active for {parity.countryName}!
</div>
{/if}
<div class="text-3xl font-bold text-foreground">${finalPrice} USD</div>
</div>Production Architecture Highlights
0-CLS Shadow DOM Isolation
Web components mount in isolated shadow roots, ensuring no style conflicts with Tailwind CSS or scoped component styles.
Sub-10ms Anycast Edge
Global Anycast edge nodes resolve geolocation and World Bank income tiers in under 10ms with zero origin server overhead.