Nuxt

The @freeplaceholder/nuxt module auto-registers components and composables for Nuxt 3.

Installation

bash

npm install https://github.com/freeplaceholder/nuxt

Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@freeplaceholder/nuxt"],
});

Auto-Imported Components

The module auto-registers <FpPlaceholder> and <FpAvatar> — no imports needed:

vue

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

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

Props

The components accept the same props as the Vue package. See the Vue.js docs for the full prop tables.

Auto-Imported Composables

These are auto-imported and available in any component or page:

vue

<script setup>
const src = usePlaceholderUrl({
  width: 600,
  height: 400,
  bg: "3b82f6",
  "text-color": "ffffff",
  blur: 2,
});

const avatar = useAvatarUrl({
  name: "Alice",
  size: 96,
  format: "png",
  grayscale: true,
});

const og = useSnippetUrl({
  title: "Hello",
  subtitle: "World",
  format: "png",
});
</script>

<template>
  <img :src="src" alt="Placeholder" />
  <img :src="avatar" alt="Alice" />
  <img :src="og" alt="" width="1200" height="630" />
</template>

Auto-Imported URL Helpers

The raw URL builders from @freeplaceholder/core are also auto-imported:

vue

<script setup>
const url = placeholderUrl({ width: 1920, height: 1080, format: "webp" });
const avatarSrc = avatarUrl({ name: "Bob", size: 256 });
const ogSrc = snippetUrl({ title: "Docs", format: "png" });
</script>

Overriding Base URL

export default defineNuxtConfig({
  modules: ["@freeplaceholder/nuxt"],

  freeplaceholder: {
    baseUrl: "https://my-custom-instance.com",
  },
});