Quikturnv1.0
Integration Examples

Vue & Nuxt Integration

Direct embeds with publishable keys (no backend proxy)

Vue (After)

<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.

Nuxt 3 (After)

<!-- 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>

On this page