Integration
Nuxt
Use Takumi through Nuxt OG Image in Nuxt apps.
Nuxt OG Image renders Vue components as OG images. Its Takumi renderer drives Takumi from a Vue template.
Install Nuxt OG Image and the Takumi binding
Add the Nuxt module, then the Takumi package that matches your runtime.
npx nuxt module add og-image| Runtime | Package |
|---|---|
| Node | @takumi-rs/core@beta |
| Edge (Cloudflare Workers, Vercel Edge) | @takumi-rs/wasm@beta |
npm install @takumi-rs/core@betaCreate a .takumi.vue template
Nuxt OG Image picks the Takumi renderer from the .takumi.vue suffix. No config is needed.
Disable Takumi with
ogImage.compatibility.runtime.takumi = false in nuxt.config.ts.<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