Nuxt
+ Pictify

Add dynamic image generation to Nuxt applications.

Frameworks

About Integration

The Pictify Nuxt module provides seamless integration for Vue-based applications. Generate images from server routes, use composables for reactive image URLs, and leverage Nuxt's powerful rendering modes.

Key Capabilities

Nuxt module available

Server routes integration

Composables included

SSR compatible

Common Use Cases

Vue-based applications

SSR image generation

Jamstack sites

Integration Guide

10 minutes

Prerequisites

Nuxt 3 project
A Pictify account with an API key
A template created in Pictify

Install the SDK

Add the Pictify SDK to your Nuxt project.

Code

npm install @pictify/sdk

Configure Environment Variables

Add your Pictify credentials to your Nuxt config.

Code

# .env
PICTIFY_API_KEY=your-api-key-here
PICTIFY_TEMPLATE_ID=your-og-template-id

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private keys (server-only)
    pictifyApiKey: process.env.PICTIFY_API_KEY,
    pictifyTemplateId: process.env.PICTIFY_TEMPLATE_ID,
    // Public keys (exposed to client)
    public: {
      siteUrl: process.env.SITE_URL || 'http://localhost:3000'
    }
  }
})

Private runtime config keys are only available on the server.

Create a Server API Route

Create an API endpoint to generate OG images on demand.

Code

// server/api/og.get.ts
import { Pictify } from '@pictify/sdk';

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const query = getQuery(event);

  const pictify = new Pictify({
    apiKey: config.pictifyApiKey
  });

  try {
    const result = await pictify.render({
      templateId: config.pictifyTemplateId,
      variables: {
        title: query.title as string || 'Default Title',
        description: query.description as string || '',
        author: query.author as string || ''
      },
      format: 'png',
      width: 1200,
      height: 630
    });

    // Redirect to CDN-hosted image
    return sendRedirect(event, result.imageUrl);
  } catch (error) {
    throw createError({
      statusCode: 500,
      message: 'Failed to generate OG image'
    });
  }
});

Create a Composable for OG URLs

Build a reusable composable to generate OG image URLs.

Code

// composables/useOgImage.ts
export function useOgImage(options: {
  title: string;
  description?: string;
  author?: string;
}) {
  const config = useRuntimeConfig();

  const ogUrl = computed(() => {
    const url = new URL('/api/og', config.public.siteUrl);
    url.searchParams.set('title', options.title);
    if (options.description) {
      url.searchParams.set('description', options.description);
    }
    if (options.author) {
      url.searchParams.set('author', options.author);
    }
    return url.toString();
  });

  return { ogUrl };
}

Use in Pages with useSeoMeta

Set dynamic OG images using Nuxt's SEO composables.

Code

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

const { ogUrl } = useOgImage({
  title: post.value.title,
  description: post.value.excerpt,
  author: post.value.author.name
});

useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogTitle: post.value.title,
  ogDescription: post.value.excerpt,
  ogImage: ogUrl.value,
  ogImageWidth: 1200,
  ogImageHeight: 630,
  twitterCard: 'summary_large_image',
  twitterTitle: post.value.title,
  twitterDescription: post.value.excerpt,
  twitterImage: ogUrl.value
});
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content" />
  </article>
</template>

useSeoMeta is SSR-safe and works with both server and client rendering.

Pre-render OG Images at Build Time

For static sites, generate images during the build process.

Code

// server/plugins/generate-og.ts
import { Pictify } from '@pictify/sdk';

export default defineNitroPlugin(async () => {
  // Only run during prerendering
  if (process.env.NITRO_PRERENDER) {
    const config = useRuntimeConfig();
    const pictify = new Pictify({ apiKey: config.pictifyApiKey });

    // Fetch all posts that need OG images
    const posts = await $fetch('/api/posts');

    for (const post of posts) {
      const result = await pictify.render({
        templateId: config.pictifyTemplateId,
        variables: {
          title: post.title,
          description: post.excerpt
        }
      });

      // Store the URL somewhere (database, JSON file, etc.)
      console.log(`Generated OG for ${post.slug}: ${result.imageUrl}`);
    }
  }
});

This runs during "nuxt generate" for static site generation.