Vue.js

The @freeplaceholder/vue package provides <FpPlaceholder> and <FpAvatar> components, plus composables for Vue 3.

Installation

bash
npm install https://github.com/freeplaceholder/vue

Placeholder Component

vue
<script setup>
import { FpPlaceholder } from "@freeplaceholder/vue";
</script>

<template>
  <FpPlaceholder
    :width="800"
    :height="400"
    text="Hero Banner"
    format="webp"
    bg="3b82f6"
    text-color="ffffff"
    font-weight="bold"
    rounded="lg"
  />
</template>

Placeholder Props

PropTypeDescription
widthnumberImage width in px (required)
heightnumberImage height in px (required)
formatImageFormatOutput format: svg, png, jpg, webp
bgstringBackground hex color
gradientGradientDirectionto-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl, radial
fromstringGradient start color — hex without #
viastringGradient middle color — hex without #
tostringGradient end color — hex without #
textColor / text-colorstringText hex color
textstringCustom text overlay
textSize / text-sizenumberFont size in px
textAlign / text-alignTextAlignleft, center, right
textTransform / text-transformTextTransformuppercase, lowercase, capitalize, none
textDecoration / text-decorationTextDecorationunderline, overline, line-through, none
letterSpacing / letter-spacing`LetterSpacing \string`tighter, tight, wide, wider, widest, or px
fontWeight / font-weightFontWeightFont weight
opacitynumber0–100
grayscalebooleanGrayscale filter
blurnumberGaussian blur 0–100 px
brightnessnumber0–200
contrastnumber0–200
hueRotate / hue-rotatenumber0–360 degrees
invertbooleanInvert colors
saturatenumber0–200
sepiabooleanSepia tone
bordernumberBorder width in px
borderColor / border-colorstringBorder hex color
borderStyle / border-styleBorderStyleBorder style
rounded`Rounded \number`Border radius
lazybooleanEnable lazy loading (default: true)

Avatar Component

vue
<script setup>
import { FpAvatar } from "@freeplaceholder/vue";
</script>

<template>
  <FpAvatar
    name="John Doe"
    :size="64"
    format="png"
    font-weight="bold"
    :border="2"
    border-color="ffffff"
  />
</template>

Avatar Props

PropTypeDescription
namestringName to derive initials from (required)
sizenumberSquare dimensions in px (default: 128)
formatImageFormatOutput format
bgstringBackground hex color
gradientGradientDirectionto-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl, radial
fromstringGradient start color — hex without #
viastringGradient middle color — hex without #
tostringGradient end color — hex without #
textColor / text-colorstringText hex color
textDecoration / text-decorationTextDecorationunderline, overline, line-through, none
letterSpacing / letter-spacing`LetterSpacing \string`Letter spacing
fontWeight / font-weightFontWeightFont weight
opacitynumber0–100
grayscalebooleanGrayscale filter
blurnumberGaussian blur 0–100 px
brightnessnumber0–200
contrastnumber0–200
hueRotate / hue-rotatenumber0–360 degrees
invertbooleanInvert colors
saturatenumber0–200
sepiabooleanSepia tone
bordernumberBorder width in px
borderColor / border-colorstringBorder hex color
borderStyle / border-styleBorderStyleBorder style
rounded`Rounded \number`Border radius
lazybooleanEnable lazy loading (default: true)

Composables

For more control, use the composables that return reactive URL strings:

vue
<script setup>
import { usePlaceholderUrl, useAvatarUrl } from "@freeplaceholder/vue";
import { ref, computed } from "vue";

const width = ref(600);
const src = usePlaceholderUrl(
  computed(() => ({ width: width.value, height: 400, bg: "3b82f6" }))
);
const avatar = useAvatarUrl({ name: "Alice", size: 96, format: "png" });
</script>

<template>
  <img :src="src" alt="Placeholder" />
  <img :src="avatar" alt="Alice" />
</template>

TypeScript

ts
import type {
  PlaceholderComponentProps,
  AvatarComponentProps,
  FontWeight,
} from "@freeplaceholder/vue";

Overriding Base URL

ts
import { configure } from "@freeplaceholder/vue";

configure({ baseUrl: "https://my-custom-instance.com" });