Nuxt
Generate Open Graph images from Vue templates with the Takumi renderer in Nuxt OG Image.
Nuxt OG Image renders Vue components as Open Graph images. Its Takumi renderer draws a Vue template with Takumi.
Install Nuxt OG Image and a Takumi binding
Add the Nuxt module:
npx nuxt module add og-imageThen add the Takumi binding for your runtime. The binding must be version 2.15 or newer within v2.
| Runtime | Package |
|---|---|
| Node.js | @takumi-rs/core |
| Edge (Cloudflare Workers, Vercel Edge) | @takumi-rs/wasm |
npm i -D @takumi-rs/coreCreate a .takumi.vue template
The .takumi.vue suffix selects the Takumi renderer, so no config is needed.
<script setup lang="ts">
defineProps<{
title: string;
description?: string;
}>();
</script>
<template>
<div class="w-full h-full flex flex-col justify-center bg-gray-950 text-white p-16">
<p class="text-6xl font-bold leading-tight">
{{ title }}
</p>
<p v-if="description" class="mt-6 text-2xl text-gray-400">
{{ description }}
</p>
</div>
</template>Attach the template to a page
Call defineOgImageComponent() in the page that should have the image.
<script setup lang="ts">
defineOgImageComponent("BlogPost", {
title: "Takumi + Nuxt",
description: "Render OG images with Nuxt OG Image.",
});
</script>Turn Takumi off
To keep Takumi installed but stop using it, set ogImage.compatibility.runtime.takumi to false:
export default defineNuxtConfig({
ogImage: {
compatibility: {
runtime: {
takumi: false,
},
},
},
});Last updated on