Support Vue / NuxtJS

[mesqueeb]

Feature Request

Description

I would love to use Satori with Vue and Nuxt

[hacknug]

@mesqueeb I'm literally playing around with it right now and it seems to work fine using Nuxt v3. The only thing you need to keep in mind is you'll need a way to transform JSX or to write you component as an object yourself.

I used Babel's playground to transform the JSX I had into the React-elements-like objects on the readme. The instructions are now simpler than the dumb thing I posted last night:

1. Just copy whatever you have on the OG Image Playground and paste it on Babel's playground
2. Open the console on that same site and copy+paste the result of the transformation
3. Right click the returned value and click the Copy Object option (I used a Chromium browser myself but it should work the same everywhere)
4. (optional) Remove the keys with a null value on you result (in my case I only had key, ref and _owner)

It is pretty dumb to do it like this but I wanted to play with this library before adding more deps to my project and looking into how to properly set things up haha

// server/api/hello.ts

import fs from 'fs/promises'
import { join } from 'path'
import satori, { SatoriOptions } from 'satori'

// NOTE: This method I just copied from the tests (https://github.com/vercel/satori/blob/main/test/utils.tsx#L9-L22)
export async function initFonts(callback: (fonts: SatoriOptions['fonts']) => void) {
  // NOTE: This uses a font file I have on my `public` dir
  const fontPath = join(process.cwd(), 'public', 'fonts', 'Inter Web',  'Inter-Bold.woff')
  const fontData = await fs.readFile(fontPath)
  callback([
    {
      name: 'Inter',
      data: fontData,
      weight: 700,
      style: 'normal',
    },
  ])
}

const buildImage = async () => {
  // NOTE: Here I fetch some data to randomise the content for my image during testing
  // NOTE: You'll need to return the component in either JSX or and object format

  return {
    type: "div",
    props: {
      tw: "flex flex-col items-stretch w-full h-full text-white bg-black/90 p-0",
      children: [
        {
          type: "div",
          props: {
            tw: "absolute w-full h-full opacity-25",
            style: {
              backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})`,
              backgroundSize: '100% 100%',
              backgroundRepeat: 'none'
            }
          },
        }
      ]
    },
  }
}

export default defineEventHandler(async (event) => {
  let fonts
  await initFonts((f) => (fonts = f))

  const svg = await satori(await buildImage(), { width: 800, height: 450, fonts })

  return svg
})

I think this is it. I'll probably keep playing with it tomorrow and try to fix or workaround the issues I encountered. Would love to hear what others outside of React-land are doing.

Hope you find this helpful enough to get started 👍

[wobsoriano]

Here's a small util to convert a Vue component to a satori-friendly VDOM - https://github.com/wobsoriano/v-satori

[heychazza]

Here's a small util to convert a Vue component to a satori-friendly VDOM - https://github.com/wobsoriano/v-satori

Are you supposed to swap out “template” and reference a Vue component?

E.g.

[wobsoriano]

Nuxt support added https://github.com/wobsoriano/v-satori

[779102260]

I made a vue demo running in web, use satori and v-satori

hope it help for you

Here's a small util to convert a Vue component to a satori-friendly VDOM - https://github.com/wobsoriano/v-satori

[Zhengqbbb]

In fact, the work I am currently dealing with is based on SSG, Like buildPre hook, buildEnd hook, or just npm script can generate OG Image, lightweight script runs and does not depend on external service processing.

Let see my resolve it process.
My requirement is to first "Vue SFC to React-elements-like objects", and at the same time, have the feature of props passing rendering. it is enough.

• Usage: tsx template.mts
• Code

// template.mts
import { readFile } from 'node:fs/promises'
import { fileURLToPath } from 'url'
import { dirname, resolve } from 'pathe'
import { html } from 'satori-html'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { parse } from '@vue/compiler-sfc'

const __dirname = dirname(fileURLToPath(import.meta.url))

export async function getTemplateObj(title: string, website: string) {
  const { descriptor } = parse(
    await readFile(resolve(__dirname, './Template.vue'), 'utf8'),
  )
  const SFC = createSSRApp({
    props: {
      title: { type: String, default: 'Vitesse' },
      website: { type: String, default: 'https://qbb.sh' },
    },
    template: descriptor.template?.content ?? '',
  }, { title, website })
  const rendered = await renderToString(SFC)
  return html(rendered)
}

(async function () {
  const obj = await getTemplateObj('Hello World | Vitesse ✘ QB Theme', 'https://qbb.sh/posts')
  console.log(obj)
}()).catch((err) => {
  console.error(err)
  process.exit(1)
})

<script setup lang="ts">
// Template.vue
defineProps<{ title: string; website: string }>()
</script>

<template>
  <h1 tw="text-lg text-white">
    {{ title }}
  </h1>
  <h2 tw="text-4">
    {{ website }}
  </h2>
</template>

Expecting to see more great solutions ～ 🤗🤗🤗

[shuding]

Moving this to discussions as many examples were shared in this thread, thanks folks!

[Anoesj]

For those who find this discussion via Google, Nuxt SEO has this built-in: https://nuxtseo.com/og-image/getting-started/installation