Vue

npm install @pictum/vue

pnpm add @pictum/vue

bun add @pictum/vue

yarn add @pictum/vue

<script setup lang="ts">
import { Icon } from "@pictum/vue";
</script>

<template>
  <Icon
    name="devicon:vuejs"
    aria-label="Vue"
    class="size-6"
  />
</template>

import { icon } from "@pictum/vue";

// Generate the URL without making a request.
const url = icon("devicon:vuejs").url;

// Fetch canonical SVG markup.
const svg = await icon("devicon:vuejs").svg();

<script setup lang="ts">
import { Avatar } from "@pictum/vue";
</script>

<template>
  <Avatar
    seed="ada-lovelace"
    variant="gradient"
    format="webp"
    alt="Ada Lovelace"
    class="size-10"
  />
</template>

import { avatar } from "@pictum/vue";

// Generate the URL without making a request.
const url = avatar("ada-lovelace", {
  variant: "gradient",
  format: "webp",
}).url;

// Fetch canonical SVG markup.
const svg = await avatar("ada-lovelace", {
  variant: "gradient",
}).svg();

<script setup lang="ts">
import { QrCode } from "@pictum/vue";
</script>

<template>
  <QrCode
    value="https://pictum.dev"
    format="svg"
    aria-label="Open Pictum"
    class="size-32"
  />
</template>

import { qrCode } from "@pictum/vue";

// Generate the URL without making a request.
const url = qrCode("https://pictum.dev", {
  format: "png",
}).url;

// Fetch canonical SVG markup.
const svg = await qrCode("https://pictum.dev").svg();

<script setup lang="ts">
import { Placeholder } from "@pictum/vue";
</script>

<template>
  <Placeholder
    :size="320"
    format="webp"
    :density="2"
    background="#ffffff"
    color="#6d28d9"
    text="Coming soon"
    alt="Coming soon"
  />
</template>

import { placeholder } from "@pictum/vue";

// Generate a custom-dimension URL without making a request.
const url = placeholder({
  width: 640,
  height: 360,
  format: "webp",
  density: 3,
  text: "Coming soon",
}).url;

// Fetch a square as canonical SVG markup.
const svg = await placeholder({
  size: 320,
  text: "Coming soon",
}).svg();