@ipgeotrace/vue

Vue 3 bindings for IPGeoTrace. Resolve the visitor's location once and share it across your app with a composable. Built on @ipgeotrace/browser — it uses a publishable key, so it's safe in the client.

Sign up and grab your publishable key at ipgeotrace.com.

Install

npm add @ipgeotrace/vue vue

Usage

Install the plugin once. It calls me() a single time and shares the result app-wide.

import { createApp } from 'vue';
import { ipgeotrace } from '@ipgeotrace/vue';
import App from './App.vue';

createApp(App)
  .use(ipgeotrace, { publishableKey: 'pk_live_...' })
  .mount('#app');

Then read it in any component with useVisitorGeo():

<script setup lang="ts">
import { computed } from 'vue';
import { useVisitorGeo } from '@ipgeotrace/vue';

const { data, loading, error } = useVisitorGeo();
const currency = computed(() => data.value?.country?.currency ?? 'USD');
</script>

<template>
  <p v-if="loading">Locating…</p>
  <p v-else-if="error">Couldn't detect your location.</p>
  <p v-else>Prices in {{ currency }}</p>
</template>

What the composable gives you

All reactive — data, error, and loading are Refs:

• data — the GeoResponse, or undefined until it resolves.
• error — a GeoError if the lookup failed (rate_limited, network_error, …).
• loading — true while the request is in flight.
• refresh() — run me() again. Useful after you know the network changed (e.g. the user toggled a VPN), since the result is never cached — every call reflects the visitor's location right now.

Options

Pass browser-client options, defer the first call, or bring your own client:

// defer the initial lookup until you call refresh()
app.use(ipgeotrace, { publishableKey: 'pk_live_...', immediate: false });

// pass through browser-client options
app.use(ipgeotrace, { publishableKey: 'pk_live_...', options: { timeoutMs: 3_000 } });

// or share a pre-built client
import { createBrowserClient } from '@ipgeotrace/browser';
const client = createBrowserClient({ publishableKey: 'pk_live_...' });
app.use(ipgeotrace, { client });

See the @ipgeotrace/browser README for the underlying me() client and publishable keys.