416 lines
33 KiB
JavaScript
416 lines
33 KiB
JavaScript
import { defineComponent, mergeProps, ref, unref, computed, readonly, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrInterpolate, ssrRenderStyle, ssrRenderClass, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual } from 'vue/server-renderer';
|
|
import { _ as _export_sfc } from './server.mjs';
|
|
import { u as useHead } from './composables-Piy9capG.mjs';
|
|
import '../nitro/nitro.mjs';
|
|
import 'node:http';
|
|
import 'node:https';
|
|
import 'node:events';
|
|
import 'node:buffer';
|
|
import 'node:fs';
|
|
import 'node:path';
|
|
import 'node:crypto';
|
|
import 'node:url';
|
|
import '../routes/renderer.mjs';
|
|
import 'vue-bundle-renderer/runtime';
|
|
import 'unhead/server';
|
|
import 'devalue';
|
|
import 'unhead/utils';
|
|
import 'vue-router';
|
|
|
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
__name: "Navbar",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const scrolled = ref(false);
|
|
const links = [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Rates", href: "#rates" },
|
|
{ label: "API Docs", href: "#playground" }
|
|
];
|
|
const mobileOpen = ref(false);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<nav${ssrRenderAttrs(mergeProps({
|
|
class: ["fixed top-0 left-0 right-0 z-50 transition-all duration-300", unref(scrolled) ? "bg-white/80 backdrop-blur-xl shadow-soft border-b border-surface-border" : "bg-transparent"]
|
|
}, _attrs))}><div class="section-container flex items-center justify-between h-16"><a href="#" class="flex items-center gap-2 group"><span class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-eu-blue text-white font-heading font-bold text-sm transition-transform group-hover:scale-105"> V </span><span class="font-heading font-bold text-lg text-ink"> vat-api<span class="text-eu-blue">.eu</span></span></a><div class="hidden md:flex items-center gap-8"><!--[-->`);
|
|
ssrRenderList(links, (link) => {
|
|
_push(`<a${ssrRenderAttr("href", link.href)} class="text-sm font-medium text-ink-secondary hover:text-eu-blue transition-colors">${ssrInterpolate(link.label)}</a>`);
|
|
});
|
|
_push(`<!--]--><a href="#playground" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-eu-blue text-white text-sm font-semibold hover:bg-eu-blue-dark transition-colors"> Try API <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path></svg></a></div><button class="md:hidden p-2 -mr-2 text-ink-secondary hover:text-ink"${ssrRenderAttr("aria-label", unref(mobileOpen) ? "Close menu" : "Open menu")}>`);
|
|
if (!unref(mobileOpen)) {
|
|
_push(`<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"></path></svg>`);
|
|
} else {
|
|
_push(`<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M6 18 18 6M6 6l12 12"></path></svg>`);
|
|
}
|
|
_push(`</button></div>`);
|
|
if (unref(mobileOpen)) {
|
|
_push(`<div class="md:hidden bg-white/95 backdrop-blur-xl border-b border-surface-border"><div class="section-container py-4 flex flex-col gap-3"><!--[-->`);
|
|
ssrRenderList(links, (link) => {
|
|
_push(`<a${ssrRenderAttr("href", link.href)} class="text-sm font-medium text-ink-secondary hover:text-eu-blue py-2 transition-colors">${ssrInterpolate(link.label)}</a>`);
|
|
});
|
|
_push(`<!--]--></div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</nav>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$7 = _sfc_main$7.setup;
|
|
_sfc_main$7.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Navbar.vue");
|
|
return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_0 = Object.assign(_sfc_main$7, { __name: "Navbar" });
|
|
const _sfc_main$6 = {};
|
|
function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs) {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({ class: "relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden" }, _attrs))}><div class="absolute inset-0 dot-grid opacity-[0.03]"></div><div class="absolute top-0 right-0 w-[600px] h-[600px] bg-eu-blue/[0.04] rounded-full blur-3xl -translate-y-1/2 translate-x-1/4"></div><div class="section-container relative"><div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center"><div><div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-eu-blue-100 text-eu-blue text-xs font-semibold tracking-wide uppercase mb-6"><span class="w-1.5 h-1.5 rounded-full bg-eu-blue animate-pulse"></span> Free & Open </div><h1 class="text-display-sm md:text-display text-ink text-balance"> EU VAT Rates <span class="text-eu-blue">API</span></h1><p class="mt-4 text-subtitle text-ink-secondary font-heading"> Free. No API key. Always up-to-date. </p><p class="mt-4 text-base text-ink-muted leading-relaxed max-w-lg"> Get current VAT rates for all 27 EU member states with a single API call. No registration, no rate limits, no nonsense. </p><div class="flex flex-wrap gap-3 mt-8"><a href="#rates" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-eu-blue text-white font-semibold text-sm hover:bg-eu-blue-dark transition-all hover:shadow-glow"> View Rates <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"></path></svg></a><a href="#playground" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border-2 border-eu-blue/20 text-eu-blue font-semibold text-sm hover:border-eu-blue/40 hover:bg-eu-blue-100 transition-all"> Try the API <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"></path></svg></a></div></div><div class="relative"><div class="absolute -inset-4 bg-eu-blue/[0.04] rounded-3xl blur-2xl"></div><div class="relative code-block p-6 shadow-card"><div class="flex items-center gap-3 mb-4 pb-4 border-b border-white/10"><div class="flex gap-1.5"><span class="w-3 h-3 rounded-full bg-[#ff5f57]"></span><span class="w-3 h-3 rounded-full bg-[#febc2e]"></span><span class="w-3 h-3 rounded-full bg-[#28c840]"></span></div><span class="text-xs text-[#8b949e] font-mono">GET /api/v1/rates/DE</span></div><pre class="text-[13px] leading-6"><span style="${ssrRenderStyle({ "color": "#8b949e" })}">// Response 200 OK</span>
|
|
<span style="${ssrRenderStyle({ "color": "#ff7b72" })}">{</span>
|
|
<span style="${ssrRenderStyle({ "color": "#79c0ff" })}">"country"</span>: <span style="${ssrRenderStyle({ "color": "#a5d6ff" })}">"Germany"</span>,
|
|
<span style="${ssrRenderStyle({ "color": "#79c0ff" })}">"country_code"</span>: <span style="${ssrRenderStyle({ "color": "#a5d6ff" })}">"DE"</span>,
|
|
<span style="${ssrRenderStyle({ "color": "#79c0ff" })}">"standard_rate"</span>: <span style="${ssrRenderStyle({ "color": "#79c0ff" })}">19</span>,
|
|
<span style="${ssrRenderStyle({ "color": "#79c0ff" })}">"reduced_rates"</span>: <span style="${ssrRenderStyle({ "color": "#ff7b72" })}">[</span><span style="${ssrRenderStyle({ "color": "#79c0ff" })}">7</span><span style="${ssrRenderStyle({ "color": "#ff7b72" })}">]</span>,
|
|
<span style="${ssrRenderStyle({ "color": "#79c0ff" })}">"currency"</span>: <span style="${ssrRenderStyle({ "color": "#a5d6ff" })}">"EUR"</span>
|
|
<span style="${ssrRenderStyle({ "color": "#ff7b72" })}">}</span></pre></div></div></div></div></section>`);
|
|
}
|
|
const _sfc_setup$6 = _sfc_main$6.setup;
|
|
_sfc_main$6.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/HeroSection.vue");
|
|
return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_1 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$1]]), { __name: "HeroSection" });
|
|
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
|
|
__name: "FeaturesGrid",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const features = [
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><circle cx="12" cy="12" r="10"/><path d="M12 6v2m0 8v2m-4.24-2.76 1.42-1.42m5.64-5.64 1.42-1.42M6 12h2m8 0h2m-2.76 4.24-1.42-1.42m-5.64-5.64L7.76 7.76"/></svg>`,
|
|
title: "All 27 EU Countries",
|
|
description: "Standard, reduced, and special VAT rates for every member state."
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>`,
|
|
title: "No Authentication",
|
|
description: "No API keys, no sign-up. Just send a GET request."
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/></svg>`,
|
|
title: "Always Current",
|
|
description: "Rates sourced and synced regularly from official EU data."
|
|
},
|
|
{
|
|
icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/></svg>`,
|
|
title: "Simple JSON",
|
|
description: "Clean, predictable JSON responses. Easy to integrate anywhere."
|
|
}
|
|
];
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({
|
|
id: "features",
|
|
class: "section-padding bg-surface-soft"
|
|
}, _attrs))}><div class="section-container"><div class="text-center mb-14 animate-on-scroll"><h2 class="text-title md:text-display-sm text-ink"> Built for developers </h2><p class="mt-3 text-ink-muted max-w-lg mx-auto"> A straightforward API that does one thing well — delivering EU VAT rates without friction. </p></div><div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5"><!--[-->`);
|
|
ssrRenderList(features, (feature, i) => {
|
|
_push(`<div class="animate-on-scroll group relative bg-white rounded-2xl p-6 border border-surface-border hover:border-eu-blue/20 hover:shadow-card transition-all duration-300" style="${ssrRenderStyle({ transitionDelay: `${i * 80}ms` })}"><div class="w-10 h-10 rounded-xl bg-eu-blue-100 text-eu-blue flex items-center justify-center mb-4 group-hover:bg-eu-blue group-hover:text-white transition-colors duration-300">${feature.icon ?? ""}</div><h3 class="font-heading font-semibold text-ink mb-1.5">${ssrInterpolate(feature.title)}</h3><p class="text-sm text-ink-muted leading-relaxed">${ssrInterpolate(feature.description)}</p></div>`);
|
|
});
|
|
_push(`<!--]--></div></div></section>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$5 = _sfc_main$5.setup;
|
|
_sfc_main$5.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/FeaturesGrid.vue");
|
|
return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_2 = Object.assign(_sfc_main$5, { __name: "FeaturesGrid" });
|
|
const euVatRates = [
|
|
{ country: "Austria", code: "AT", flag: "🇦🇹", standard: 20, reduced: [10, 13] },
|
|
{ country: "Belgium", code: "BE", flag: "🇧🇪", standard: 21, reduced: [6, 12] },
|
|
{ country: "Bulgaria", code: "BG", flag: "🇧🇬", standard: 20, reduced: [9] },
|
|
{ country: "Croatia", code: "HR", flag: "🇭🇷", standard: 25, reduced: [5, 13] },
|
|
{ country: "Cyprus", code: "CY", flag: "🇨🇾", standard: 19, reduced: [5, 9] },
|
|
{ country: "Czech Republic", code: "CZ", flag: "🇨🇿", standard: 21, reduced: [12, 15] },
|
|
{ country: "Denmark", code: "DK", flag: "🇩🇰", standard: 25, reduced: [] },
|
|
{ country: "Estonia", code: "EE", flag: "🇪🇪", standard: 22, reduced: [9] },
|
|
{ country: "Finland", code: "FI", flag: "🇫🇮", standard: 25.5, reduced: [10, 14] },
|
|
{ country: "France", code: "FR", flag: "🇫🇷", standard: 20, reduced: [5.5, 10] },
|
|
{ country: "Germany", code: "DE", flag: "🇩🇪", standard: 19, reduced: [7] },
|
|
{ country: "Greece", code: "GR", flag: "🇬🇷", standard: 24, reduced: [6, 13] },
|
|
{ country: "Hungary", code: "HU", flag: "🇭🇺", standard: 27, reduced: [5, 18] },
|
|
{ country: "Ireland", code: "IE", flag: "🇮🇪", standard: 23, reduced: [9, 13.5] },
|
|
{ country: "Italy", code: "IT", flag: "🇮🇹", standard: 22, reduced: [5, 10] },
|
|
{ country: "Latvia", code: "LV", flag: "🇱🇻", standard: 21, reduced: [5, 12] },
|
|
{ country: "Lithuania", code: "LT", flag: "🇱🇹", standard: 21, reduced: [5, 9] },
|
|
{ country: "Luxembourg", code: "LU", flag: "🇱🇺", standard: 17, reduced: [8] },
|
|
{ country: "Malta", code: "MT", flag: "🇲🇹", standard: 18, reduced: [5, 7] },
|
|
{ country: "Netherlands", code: "NL", flag: "🇳🇱", standard: 21, reduced: [9] },
|
|
{ country: "Poland", code: "PL", flag: "🇵🇱", standard: 23, reduced: [5, 8] },
|
|
{ country: "Portugal", code: "PT", flag: "🇵🇹", standard: 23, reduced: [6, 13] },
|
|
{ country: "Romania", code: "RO", flag: "🇷🇴", standard: 19, reduced: [5, 9] },
|
|
{ country: "Slovakia", code: "SK", flag: "🇸🇰", standard: 23, reduced: [5, 10] },
|
|
{ country: "Slovenia", code: "SI", flag: "🇸🇮", standard: 22, reduced: [5, 9.5] },
|
|
{ country: "Spain", code: "ES", flag: "🇪🇸", standard: 21, reduced: [4, 10] },
|
|
{ country: "Sweden", code: "SE", flag: "🇸🇪", standard: 25, reduced: [6, 12] }
|
|
];
|
|
function useVatRates() {
|
|
const rates = readonly(ref(euVatRates));
|
|
function getRateByCode(code) {
|
|
return euVatRates.find((r) => r.code === code.toUpperCase());
|
|
}
|
|
function formatApiResponse(rate) {
|
|
return {
|
|
country: rate.country,
|
|
country_code: rate.code,
|
|
standard_rate: rate.standard,
|
|
reduced_rates: rate.reduced,
|
|
currency: "EUR"
|
|
};
|
|
}
|
|
function formatAllRatesResponse() {
|
|
return euVatRates.map(formatApiResponse);
|
|
}
|
|
return { rates, getRateByCode, formatApiResponse, formatAllRatesResponse };
|
|
}
|
|
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
__name: "VatRateTable",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const rates = ref([]);
|
|
const search = ref("");
|
|
const filtered = computed(() => {
|
|
const q = search.value.toLowerCase().trim();
|
|
if (!q) return rates.value;
|
|
return rates.value.filter(
|
|
(r) => r.country.toLowerCase().includes(q) || r.code.toLowerCase().includes(q)
|
|
);
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({
|
|
id: "rates",
|
|
class: "section-padding"
|
|
}, _attrs))}><div class="section-container"><div class="text-center mb-10 animate-on-scroll"><h2 class="text-title md:text-display-sm text-ink"> VAT Rates across the EU </h2><p class="mt-3 text-ink-muted max-w-lg mx-auto"> Current standard and reduced rates for all 27 member states. </p></div><div class="max-w-sm mx-auto mb-8 animate-on-scroll"><div class="relative"><svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-ink-faint" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"></path></svg><input${ssrRenderAttr("value", unref(search))} type="text" placeholder="Search countries..." class="w-full pl-10 pr-4 py-2.5 rounded-xl border border-surface-border bg-white text-sm text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-eu-blue/20 focus:border-eu-blue/40 transition-all"></div></div><div class="animate-on-scroll overflow-hidden rounded-2xl border border-surface-border bg-white shadow-soft"><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="bg-surface-soft border-b border-surface-border"><th class="text-left font-semibold text-ink-secondary px-5 py-3.5 font-heading">Country</th><th class="text-left font-semibold text-ink-secondary px-5 py-3.5 font-heading w-20">Code</th><th class="text-right font-semibold text-ink-secondary px-5 py-3.5 font-heading w-32">Standard</th><th class="text-right font-semibold text-ink-secondary px-5 py-3.5 font-heading w-40">Reduced</th></tr></thead><tbody><!--[-->`);
|
|
ssrRenderList(unref(filtered), (rate) => {
|
|
_push(`<tr class="border-b border-surface-border/60 last:border-0 hover:bg-eu-blue-100/40 transition-colors"><td class="px-5 py-3"><span class="inline-flex items-center gap-2.5"><span class="text-lg leading-none">${ssrInterpolate(rate.flag)}</span><span class="font-medium text-ink">${ssrInterpolate(rate.country)}</span></span></td><td class="px-5 py-3"><span class="inline-flex px-2 py-0.5 rounded bg-surface-muted font-mono text-xs font-medium text-ink-secondary">${ssrInterpolate(rate.code)}</span></td><td class="px-5 py-3 text-right"><span class="font-semibold text-ink tabular-nums">${ssrInterpolate(rate.standard)}%</span></td><td class="px-5 py-3 text-right">`);
|
|
if (rate.reduced.length) {
|
|
_push(`<span class="text-ink-muted tabular-nums">${ssrInterpolate(rate.reduced.map((r) => `${r}%`).join(", "))}</span>`);
|
|
} else {
|
|
_push(`<span class="text-ink-faint">—</span>`);
|
|
}
|
|
_push(`</td></tr>`);
|
|
});
|
|
_push(`<!--]-->`);
|
|
if (!unref(filtered).length) {
|
|
_push(`<tr><td colspan="4" class="px-5 py-10 text-center text-ink-muted"> No countries matching "${ssrInterpolate(unref(search))}" </td></tr>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</tbody></table></div></div><p class="text-center text-xs text-ink-faint mt-4"> Data updated regularly from official EU sources. </p></div></section>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$4 = _sfc_main$4.setup;
|
|
_sfc_main$4.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/VatRateTable.vue");
|
|
return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_3 = Object.assign(_sfc_main$4, { __name: "VatRateTable" });
|
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
__name: "ApiPlayground",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const { rates } = useVatRates();
|
|
const selectedCode = ref("DE");
|
|
const response = ref("");
|
|
const statusCode = ref(null);
|
|
const isLoading = ref(false);
|
|
const showAllRates = ref(false);
|
|
const endpointUrl = computed(
|
|
() => showAllRates.value ? "https://vat-api.eu/api/v1/rates" : `https://vat-api.eu/api/v1/rates/${selectedCode.value}`
|
|
);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({
|
|
id: "playground",
|
|
class: "section-padding bg-surface-soft"
|
|
}, _attrs))}><div class="section-container"><div class="text-center mb-10 animate-on-scroll"><h2 class="text-title md:text-display-sm text-ink"> Try it out </h2><p class="mt-3 text-ink-muted max-w-lg mx-auto"> Build your request, send it, and see the response. </p></div><div class="animate-on-scroll max-w-3xl mx-auto"><div class="bg-white rounded-2xl border border-surface-border shadow-card overflow-hidden"><div class="p-5 border-b border-surface-border"><div class="flex flex-wrap gap-3 items-end"><div class="flex-shrink-0"><label class="block text-xs font-medium text-ink-muted mb-1.5">Endpoint</label><div class="flex rounded-lg border border-surface-border overflow-hidden text-sm"><button class="${ssrRenderClass([!unref(showAllRates) ? "bg-eu-blue text-white" : "bg-white text-ink-secondary hover:bg-surface-soft", "px-3 py-2 font-medium transition-colors"])}"> Single </button><button class="${ssrRenderClass([unref(showAllRates) ? "bg-eu-blue text-white" : "bg-white text-ink-secondary hover:bg-surface-soft", "px-3 py-2 font-medium transition-colors"])}"> All Rates </button></div></div>`);
|
|
if (!unref(showAllRates)) {
|
|
_push(`<div class="flex-shrink-0"><label class="block text-xs font-medium text-ink-muted mb-1.5">Country</label><select class="px-3 py-2 rounded-lg border border-surface-border bg-white text-sm text-ink focus:outline-none focus:ring-2 focus:ring-eu-blue/20 focus:border-eu-blue/40 transition-all"><!--[-->`);
|
|
ssrRenderList(unref(rates), (rate) => {
|
|
_push(`<option${ssrRenderAttr("value", rate.code)}${ssrIncludeBooleanAttr(Array.isArray(unref(selectedCode)) ? ssrLooseContain(unref(selectedCode), rate.code) : ssrLooseEqual(unref(selectedCode), rate.code)) ? " selected" : ""}>${ssrInterpolate(rate.flag)} ${ssrInterpolate(rate.country)} (${ssrInterpolate(rate.code)}) </option>`);
|
|
});
|
|
_push(`<!--]--></select></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<button class="px-5 py-2 rounded-lg bg-eu-gold text-eu-blue-dark font-semibold text-sm hover:bg-eu-gold-dark transition-colors flex items-center gap-2"${ssrIncludeBooleanAttr(unref(isLoading)) ? " disabled" : ""}>`);
|
|
if (unref(isLoading)) {
|
|
_push(`<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`<span>${ssrInterpolate(unref(isLoading) ? "Sending..." : "Send Request")}</span></button></div><div class="mt-3.5 flex items-center gap-2 px-3.5 py-2.5 rounded-lg bg-surface-muted font-mono text-sm overflow-x-auto"><span class="flex-shrink-0 text-xs font-semibold px-1.5 py-0.5 rounded bg-green-100 text-green-700">GET</span><span class="text-ink-secondary">${ssrInterpolate(unref(endpointUrl))}</span></div></div><div class="relative"><div class="flex items-center justify-between px-5 py-3 bg-[#0d1117] border-b border-white/5"><span class="text-xs text-[#8b949e] font-mono">Response</span>`);
|
|
if (unref(statusCode) === 200) {
|
|
_push(`<span class="text-xs font-mono px-2 py-0.5 rounded bg-green-500/20 text-green-400">200 OK</span>`);
|
|
} else if (unref(statusCode)) {
|
|
_push(`<span class="text-xs font-mono px-2 py-0.5 rounded bg-red-500/20 text-red-400">${ssrInterpolate(unref(statusCode))} Error</span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</div><div class="bg-[#0d1117] text-[#e6edf3] font-mono text-sm leading-relaxed p-5 max-h-80 overflow-y-auto">`);
|
|
if (unref(response)) {
|
|
_push(`<pre class="text-[13px] leading-6">${unref(response) ?? ""}</pre>`);
|
|
} else if (unref(isLoading)) {
|
|
_push(`<p class="text-[#8b949e] text-sm">Loading...</p>`);
|
|
} else {
|
|
_push(`<p class="text-[#8b949e] text-sm">Click "Send Request" to see a response.</p>`);
|
|
}
|
|
_push(`</div></div></div></div></div></section>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$3 = _sfc_main$3.setup;
|
|
_sfc_main$3.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ApiPlayground.vue");
|
|
return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_4 = Object.assign(_sfc_main$3, { __name: "ApiPlayground" });
|
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
__name: "CodeExamples",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
const tabs = ["cURL", "JavaScript", "Python"];
|
|
const activeTab = ref("cURL");
|
|
const code = {
|
|
cURL: `# Get all EU VAT rates
|
|
curl https://vat-api.eu/api/v1/rates
|
|
|
|
# Get rates for a specific country
|
|
curl https://vat-api.eu/api/v1/rates/DE`,
|
|
JavaScript: `const response = await fetch('https://vat-api.eu/api/v1/rates/DE');
|
|
const data = await response.json();
|
|
console.log(data.standard_rate); // 19`,
|
|
Python: `import requests
|
|
|
|
response = requests.get('https://vat-api.eu/api/v1/rates/DE')
|
|
data = response.json()
|
|
print(data['standard_rate']) # 19`
|
|
};
|
|
const highlighted = {
|
|
cURL: highlightBash(code.cURL),
|
|
JavaScript: highlightJS(code.JavaScript),
|
|
Python: highlightPython(code.Python)
|
|
};
|
|
function highlightBash(src) {
|
|
return src.replace(/(#.*)/g, '<span style="color:#8b949e">$1</span>').replace(/(curl)\s/g, '<span style="color:#ff7b72">$1</span> ').replace(/(https?:\/\/[^\s]+)/g, '<span style="color:#a5d6ff">$1</span>');
|
|
}
|
|
function highlightJS(src) {
|
|
return src.replace(/(\/\/\s*\d+)/g, '<span style="color:#8b949e">$1</span>').replace(/(const|await)\s/g, '<span style="color:#ff7b72">$1</span> ').replace(/(fetch|json|log)\(/g, '<span style="color:#d2a8ff">$1</span>(').replace(/('https?:\/\/[^']*')/g, '<span style="color:#a5d6ff">$1</span>').replace(/(\.standard_rate)/g, '<span style="color:#79c0ff">$1</span>').replace(/(console)\./g, '<span style="color:#79c0ff">$1</span>.').replace(/(response)\./g, '<span style="color:#79c0ff">$1</span>.');
|
|
}
|
|
function highlightPython(src) {
|
|
return src.replace(/(#\s*\d+)/g, '<span style="color:#8b949e">$1</span>').replace(/(import|from)\s/g, '<span style="color:#ff7b72">$1</span> ').replace(/(requests)/g, '<span style="color:#79c0ff">$1</span>').replace(/('https?:\/\/[^']*')/g, '<span style="color:#a5d6ff">$1</span>').replace(/(\['standard_rate'\])/g, '<span style="color:#79c0ff">$1</span>').replace(/(print|get)\(/g, '<span style="color:#d2a8ff">$1</span>(').replace(/(response)\./g, '<span style="color:#79c0ff">$1</span>.');
|
|
}
|
|
const copied = ref(false);
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
_push(`<section${ssrRenderAttrs(mergeProps({
|
|
id: "examples",
|
|
class: "section-padding"
|
|
}, _attrs))}><div class="section-container"><div class="text-center mb-10 animate-on-scroll"><h2 class="text-title md:text-display-sm text-ink"> Quick start </h2><p class="mt-3 text-ink-muted max-w-lg mx-auto"> Integrate EU VAT rates into your project in seconds. </p></div><div class="animate-on-scroll max-w-2xl mx-auto"><div class="rounded-2xl border border-surface-border overflow-hidden shadow-card bg-white"><div class="flex items-center justify-between border-b border-surface-border bg-surface-soft px-1.5"><div class="flex"><!--[-->`);
|
|
ssrRenderList(tabs, (tab) => {
|
|
_push(`<button class="${ssrRenderClass([unref(activeTab) === tab ? "text-eu-blue" : "text-ink-muted hover:text-ink-secondary", "px-4 py-3 text-sm font-medium transition-colors relative"])}">${ssrInterpolate(tab)} `);
|
|
if (unref(activeTab) === tab) {
|
|
_push(`<span class="absolute bottom-0 left-2 right-2 h-0.5 bg-eu-blue rounded-full"></span>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
_push(`</button>`);
|
|
});
|
|
_push(`<!--]--></div><button class="flex items-center gap-1.5 px-3 py-1.5 mr-1.5 rounded-lg text-xs font-medium text-ink-muted hover:text-ink-secondary hover:bg-surface-muted transition-colors">`);
|
|
if (!unref(copied)) {
|
|
_push(`<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"></path></svg>`);
|
|
} else {
|
|
_push(`<svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"></path></svg>`);
|
|
}
|
|
_push(` ${ssrInterpolate(unref(copied) ? "Copied!" : "Copy")}</button></div><div class="code-block p-5"><pre class="text-[13px] leading-6">${highlighted[unref(activeTab)] ?? ""}</pre></div></div></div></div></section>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$2 = _sfc_main$2.setup;
|
|
_sfc_main$2.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/CodeExamples.vue");
|
|
return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_5 = Object.assign(_sfc_main$2, { __name: "CodeExamples" });
|
|
const _sfc_main$1 = {};
|
|
function _sfc_ssrRender(_ctx, _push, _parent, _attrs) {
|
|
_push(`<footer${ssrRenderAttrs(mergeProps({ class: "border-t border-surface-border bg-white" }, _attrs))}><div class="section-container py-10"><div class="flex flex-col md:flex-row items-center justify-between gap-6 text-sm text-ink-muted"><div class="flex items-center gap-2"><span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-eu-blue text-white font-heading font-bold text-[10px]">V</span><span class="font-heading font-semibold text-ink"> vat-api<span class="text-eu-blue">.eu</span></span><span class="hidden sm:inline text-ink-faint">— Free EU VAT Rate API</span></div><p class="text-ink-faint text-xs"> Free EU VAT rate data </p><div class="flex items-center gap-5"><a href="#" class="hover:text-eu-blue transition-colors">Imprint</a><a href="#" class="hover:text-eu-blue transition-colors">Privacy</a><a href="#" class="hover:text-eu-blue transition-colors flex items-center gap-1.5"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg> GitHub </a></div></div></div></footer>`);
|
|
}
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/FooterSection.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_6 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender]]), { __name: "FooterSection" });
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "index",
|
|
__ssrInlineRender: true,
|
|
setup(__props) {
|
|
useHead({
|
|
title: "vat-api.eu — Free EU VAT Rates API",
|
|
meta: [
|
|
{
|
|
name: "description",
|
|
content: "Get current VAT rates for all 27 EU member states with a free, open REST API. No API key required."
|
|
},
|
|
{ property: "og:title", content: "vat-api.eu — Free EU VAT Rates API" },
|
|
{
|
|
property: "og:description",
|
|
content: "Get current VAT rates for all 27 EU member states with a free, open REST API. No API key required."
|
|
},
|
|
{ property: "og:type", content: "website" },
|
|
{ property: "og:url", content: "https://vat-api.eu" },
|
|
{ name: "twitter:card", content: "summary_large_image" },
|
|
{ name: "twitter:title", content: "vat-api.eu — Free EU VAT Rates API" },
|
|
{
|
|
name: "twitter:description",
|
|
content: "Get current VAT rates for all 27 EU member states with a free, open REST API. No API key required."
|
|
}
|
|
]
|
|
});
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_Navbar = __nuxt_component_0;
|
|
const _component_HeroSection = __nuxt_component_1;
|
|
const _component_FeaturesGrid = __nuxt_component_2;
|
|
const _component_VatRateTable = __nuxt_component_3;
|
|
const _component_ApiPlayground = __nuxt_component_4;
|
|
const _component_CodeExamples = __nuxt_component_5;
|
|
const _component_FooterSection = __nuxt_component_6;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "min-h-screen" }, _attrs))}>`);
|
|
_push(ssrRenderComponent(_component_Navbar, null, null, _parent));
|
|
_push(`<main>`);
|
|
_push(ssrRenderComponent(_component_HeroSection, null, null, _parent));
|
|
_push(ssrRenderComponent(_component_FeaturesGrid, null, null, _parent));
|
|
_push(ssrRenderComponent(_component_VatRateTable, null, null, _parent));
|
|
_push(ssrRenderComponent(_component_ApiPlayground, null, null, _parent));
|
|
_push(ssrRenderComponent(_component_CodeExamples, null, null, _parent));
|
|
_push(`</main>`);
|
|
_push(ssrRenderComponent(_component_FooterSection, null, null, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/index.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
|
|
export { _sfc_main as default };
|
|
//# sourceMappingURL=index-BDcJu3_l.mjs.map
|