nuxt-dsi
v0.9.9
Published
Nuxt module to generate dynamic social media compatible images.
Downloads
63
Maintainers
Readme
Nuxt DSI (Dynamic Social Images)
Sets up an endpoint (default: /socialImage
) that takes a path
GET parameter and will generate a dynamic social share image based on specified meta tags, and other configuration.
The path parameter tells the module what path on the website you are rendering the image for, i.e.:
/socialImage?path=/blog/my-first/post
Generated images are cached, and the cache is cleared when your application restarts.
This module works well with nuxt-head-ex :)
Installation
yarn add nuxt-dsi
Add the module to your nuxt.config.ts
:
modules: ['nuxt-dsi'],
Configuration
Add the module to your nuxt.config.ts
and add optional configuration:
import {DSIHandler} from '~playground/src/dsi-handler.get.ts'
export default defineNuxtConfig({
modules: [
'nuxt-dsi'
],
dsi: {
// where the image endpoint will listen
path: '/socialImage',
// static text placed at the top of the image
fixedText: 'Nuxt: Dynamic Social Images',
// set your custom render handler/function
customHandler: DSIHandler,
// set up your custom fonts
fonts: [
{ path: 'playground/fonts/ConnectionIi-2wj8.otf',
options: { family: 'connectionii' } },
{ path: 'playground/fonts/Barlow/Barlow-thin.ttf',
options: { family: 'barlowthin', fontWeight: '100' } }
]
}
})
In your app.vue
, set up your default og:image
reflectively:
<script setup>
import {useHead} from "#head"
import {useRoute, useRuntimeConfig} from "#app";
const config = useRuntimeConfig().public.dsi
const route = useRoute()
useHead({
meta: [
{
property: 'og:image',
content: () => `${config.path}?path=${route.fullPath}`
}
]
})
</script>
See fabric's registerFont method to learn more about configuring fonts.
Extending / Customization
You can check out the playground/src/dsi-handler.get.ts for an example on how to add your own render function that overrides the default, giving you complete control over what your cards look like!
If you want to use 'clean' versions of strings (i.e. a barebones title like "Homepage" instead of "MySite: Homepage"), you can specify the meta tag as such:
useHead({
title: 'This is my Test Page',
meta:[
{name: 'clean:title', content: "Test Page" },
]
})
Examples
Development
- Run
npm run dev:prepare
to generate type stubs. - Use
npm run dev
to start playground in development mode.
Credits
Made with 💚 by Larry Williamson / @l422y