Vue / Nuxt Examples

Vue and Nuxt patterns for BrandQL logos, including dark mode and strict fallbacks.

Vue / Nuxt

Use a small component for clean reuse, or drop in the URL directly.

If you need strict behavior, set fallback=false and handle a 404.

<script setup lang="ts">
const props = defineProps<{
  domain: string
  size?: number
  variant?: 'default' | 'dark' | 'light' | 'transparent'
  format?: 'png' | 'jpg' | 'webp' | 'avif' | 'svg'
  fallback?: boolean
}>()

const size = props.size ?? 64
const variant = props.variant ?? 'default'
const fallback = props.fallback ?? true

const params = new URLSearchParams()
if (variant !== 'default') params.set('variant', variant)
if (props.format) params.set('format', props.format)
if (size) params.set('size', String(size))
if (!fallback) params.set('fallback', 'false')

const query = params.toString()
const src = `https://api.brandql.com/logo/${props.domain}${query ? `?${query}` : ''}`
</script>

<template>
  <img :src="src" :alt="domain" :width="size" :height="size" />
</template>

<template>
  <picture>
    <source
      media="(prefers-color-scheme: dark)"
      :srcset="`https://api.brandql.com/logo/${domain}?variant=dark`"
    />
    <img
      :src="`https://api.brandql.com/logo/${domain}`"
      :alt="domain"
      width="64"
      height="64"
    />
  </picture>
</template>

<script setup>
defineProps(['domain'])
</script>

Was this page helpful?