Integration Examples
Vue & Nuxt Integration
Direct embeds, web component, and publishable keys
Vue (Direct Embed)
<template>
<img
:src="`https://logos.getquikturn.io/${domain}?token=${publishableKey}&size=${size}`"
:alt="`${domain} logo`"
loading="lazy"
/>
</template>
<script setup>
const publishableKey = import.meta.env.VITE_QUIKTURN_PUBLISHABLE_KEY;
defineProps({
domain: { type: String, required: true },
size: { type: Number, default: 64 },
});
</script>Add &theme=light|dark or &greyscale=true if needed.
Vue (Web Component)
The <quikturn-logo> web component works natively in Vue without any adapter:
npm install @quikturn/logos<template>
<quikturn-logo :domain="domain" :size="size" :token="publishableKey" />
</template>
<script setup>
import "@quikturn/logos/element";
const publishableKey = import.meta.env.VITE_QUIKTURN_PUBLISHABLE_KEY;
defineProps({
domain: { type: String, required: true },
size: { type: Number, default: 64 },
});
</script>The web component renders inside Shadow DOM, includes built-in loading states, and handles errors automatically.
Nuxt 3 (Direct Embed)
<!-- components/QuikturnLogo.vue -->
<template>
<img
:src="logoUrl"
:alt="`${domain} logo`"
loading="lazy"
/>
</template>
<script setup>
const props = defineProps({
domain: { type: String, required: true },
size: { type: Number, default: 64 },
});
const config = useRuntimeConfig();
const logoUrl = computed(
() =>
`https://logos.getquikturn.io/${props.domain}?token=${config.public.quikturnKey}&size=${props.size}`
);
</script>Nuxt 3 (Server-Side with SDK)
Use the TypeScript SDK in Nuxt server routes for batch operations and higher-resolution logos:
npm install @quikturn/logos// server/api/logo/[domain].get.ts
import { QuikturnLogos } from "@quikturn/logos/server";
const client = new QuikturnLogos({
secretKey: process.env.QT_SECRET_KEY!,
});
export default defineEventHandler(async (event) => {
const domain = getRouterParam(event, "domain")!;
const { buffer, contentType } = await client.get(domain, { size: 512 });
setResponseHeaders(event, {
"Content-Type": contentType,
"Cache-Control": "public, max-age=86400",
});
return buffer;
});