> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Use Pictum icon, avatar, QR code, and placeholder interfaces with Vue.

## Installation

Install the Vue package with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @pictum/vue
  ```

  ```bash pnpm theme={null}
  pnpm add @pictum/vue
  ```

  ```bash bun theme={null}
  bun add @pictum/vue
  ```

  ```bash yarn theme={null}
  yarn add @pictum/vue
  ```
</CodeGroup>

## Icons

Render an icon in a template with `Icon`, or use `icon()` when you need its URL or SVG markup in script code.

<CodeGroup>
  ```vue Component theme={null}
  <script setup lang="ts">
  import { Icon } from "@pictum/vue";
  </script>

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

  ```ts Helper theme={null}
  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();
  ```
</CodeGroup>

## Avatars

Render a deterministic profile image with `Avatar`, or use `avatar()` to pass the selected image URL to another service or retrieve its canonical SVG.

<CodeGroup>
  ```vue Component theme={null}
  <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>
  ```

  ```ts Helper theme={null}
  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();
  ```
</CodeGroup>

## QR codes

Render scannable text or URLs with `QrCode`, or use `qrCode()` when script code needs the image URL or canonical SVG.

<CodeGroup>
  ```vue Component theme={null}
  <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>
  ```

  ```ts Helper theme={null}
  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();
  ```
</CodeGroup>

## Placeholders

Render square or custom-dimension images with `Placeholder`, or use `placeholder()` when script code needs the selected image URL or SVG markup.

<CodeGroup>
  ```vue Component theme={null}
  <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>
  ```

  ```ts Helper theme={null}
  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();
  ```
</CodeGroup>

Helpers return the selected representation URL immediately. Calling `.svg()` retrieves canonical SVG markup for the same asset.