Home / Use cases / Vue.js

Vue.js VAT Validation: Real-time Tax ID Checks with Composition API

Integrate real-time EU VAT number validation into Vue.js 3 applications using the Composition API. Custom composable, debounced input, and a server-side proxy pattern to protect your API key.

Implementation steps

1. 1

   Create the server-side proxy endpoint

   Add a backend route that accepts POST with a vatNumber body, calls GET /api/v1/validate/:country/:vat with your server-side API key, and returns only the fields your frontend needs: valid, status, companyName, address. This keeps the API key server-side and gives you a place to add rate limiting.

2. 2

   Build the useVatValidation composable

   Create a composable that accepts a vatNumber ref, debounces changes by 600ms using watchEffect and a manual setTimeout, calls your proxy endpoint on each debounced change, and returns reactive refs for state ('idle' | 'loading' | 'valid' | 'invalid' | 'unavailable'), companyName, address, and errorMessage.

3. 3

   Build the VatInput component

   Create a Vue component that takes a modelValue prop (for v-model), emits update:modelValue and vatValidated events, uses useVatValidation internally, and renders inline feedback below the input: a spinner when loading, a green confirmation box with company name when valid, a red error message when invalid, and a yellow warning when unavailable.

4. 4

   Handle the vatValidated event in the parent form

   Listen for the vatValidated event from VatInput in your checkout form component. When the event fires with a valid result, store the vatNumber and companyName in your form state. When the input is cleared, reset these to null. Submit both to your backend along with the order data so the VAT validation is recorded alongside the order.

5. 5

   Add Nuxt server route for Nuxt 3 projects

   For Nuxt 3, create server/routes/api/validate-vat.post.ts. Use the event body to get vatNumber, call the TaxID API with useRuntimeConfig().taxidApiKey, and return the filtered result. Register the key in nuxt.config.ts under runtimeConfig.taxidApiKey (not runtimeConfig.public — keeps it server-only).

Code example

const res = await fetch(
  'http://localhost:3000/api/v1/validate/DE/DE123456789',
  { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }
);
const { valid, status, company_name, company_address } = await res.json();

if (valid) {
  console.log(`Valid EU business: ${company_name}`);
} else if (status === 'service_unavailable') {
  // VIES is temporarily down — retry or allow with manual check
  console.log('VIES unavailable — check back in a few minutes');
} else {
  console.log('Invalid VAT number — charge local tax rate');
}

import requests

res = requests.get(
    "http://localhost:3000/api/v1/validate/DE/DE123456789",
    headers={"Authorization": "Bearer YOUR_API_KEY"}
)
data = res.json()

if data["valid"]:
    print(f"Valid: {data['company_name']}")
elif data["status"] == "service_unavailable":
    print("VIES temporarily unavailable")
else:
    print("Invalid VAT number")

API response

The TaxID API returns a consistent JSON response for every validation request:

{
  "valid": true,
  "status": "active",
  "country_code": "DE",
  "vat_number": "123456789",
  "company_name": "Example GmbH",
  "company_address": "Musterstraße 1, 10115 Berlin",
  "request_date": "2026-05-10T00:00:00.000Z",
  "cached": false,
  "request_id": "req_01j..."
}

Error handling

The API uses a consistent Stripe-style error format. Always handle service_unavailable separately — VIES has occasional downtime and you should not reject valid customers during outages.

Related use cases