https://github.com/wobsoriano/v-satori

Generate a satori-friendly VDOM from a Vue component
https://github.com/wobsoriano/v-satori

nuxt satori vue

Last synced: about 1 month ago
JSON representation

Generate a satori-friendly VDOM from a Vue component

• Host: GitHub
• URL: https://github.com/wobsoriano/v-satori
• Owner: wobsoriano
• License: mit
• Created: 2022-10-22T22:10:35.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-03T18:57:15.000Z (about 1 year ago)
• Last Synced: 2024-10-02T08:52:05.447Z (about 1 month ago)
• Topics: nuxt, satori, vue
• Language: TypeScript
• Homepage: https://v-satori.vercel.app/api/og?title=hello%20world&website=robsoriano.com
• Size: 768 KB
• Stars: 36
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# v-satori

Generate a [satori](https://github.com/vercel/satori)-friendly VDOM from a Vue component. Uses [satori-html](https://github.com/natemoo-re/satori-html).

## Installion

```bash

npm install satori v-satori

```

## Usage

Nuxt 3

```ts

export default defineNuxtConfig({

  modules: ['v-satori/nuxt']

})

```

```vue

defineProps({

  title: String,

  website: String,

})

  


    


      


        


          {{ title }}

        

        


          {{ website }}

        

      

    

  


```

```ts

// server/api/og.ts

import { satori } from 'v-satori'

import Image from '@/components/Image.vue'

// https://github.com/wobsoriano/unplugin-font-to-buffer

import Roboto from '@/lib/fonts/Roboto-Regular.ttf'

export default eventHandler(async (event) => {

  const query = getQuery(event)

  const svg = await satori(Image, {

    props: {

      title: query.title,

      website: query.website

    },

    width: 1200,

    height: 630,

    fonts: [{

      name: 'Roboto',

      data: Roboto,

      weight: 400,

      style: 'normal',

    }]

  })

  setHeader(event, 'Content-Type', 'image/svg+xml')

  return svg

})

```

You can then create new dynamic images by passing the following parameters to the API endpoint:

```vue

const title = 'OG Image Generator using Nuxt and Satori'

const website = 'v3.nuxtjs.org'

  

    

  

```

Output:



## License

MIT