Nuxt
Use Takumi through Nuxt OG Image in Nuxt apps.
The recommended integration is Nuxt OG Image with its Takumi renderer. It already knows how to render Vue components as OG images.
BlogPost.takumi.vue
nuxt.config.ts
Add the Nuxt module and the runtime binding
npx nuxt module add og-image
npm install -D @takumi-rs/coreFor edge runtimes (Cloudflare Workers, Vercel Edge) install @takumi-rs/wasm instead.
Set Takumi as the renderer
export default defineNuxtConfig({
ogImage: {
defaults: {
renderer: "takumi",
},
},
});Write a .takumi.vue template
Nuxt OG Image picks up the Takumi renderer from the suffix.
<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
<script setup lang="ts">
defineOgImageComponent("BlogPost", {
title: "Takumi + Nuxt",
description: "Render OG images with Nuxt OG Image.",
});
</script>Edit on GitHub
Last updated on