Nuxt
Use Takumi through Nuxt OG Image in Nuxt apps.
If you're using Nuxt, the recommended integration is Nuxt OG Image. It already knows how to render Vue components as OG images, and its Takumi renderer is the easiest way to use Takumi in a Nuxt app.
Install Nuxt OG Image and the Takumi binding
Add the Nuxt module first, then install the Takumi package that matches your runtime.
npx nuxt module add og-imagenpm install -D @takumi-rs/coreFor edge runtimes such as Cloudflare Workers or Vercel Edge, install @takumi-rs/wasm instead of @takumi-rs/core.
Set Takumi as the renderer
Configure Nuxt OG Image to use Takumi by default.
export default defineNuxtConfig({
ogImage: {
defaults: {
renderer: "takumi",
},
},
});Create a .takumi.vue template
Nuxt OG Image detects the Takumi renderer from the .takumi.vue 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
Use defineOgImageComponent() in the page that should emit the image.
<script setup lang="ts">
defineOgImageComponent("BlogPost", {
title: "Takumi + Nuxt",
description: "Render OG images with Nuxt OG Image.",
});
</script>Edit on GitHub
Last updated on