harlan-zw/nuxt-og-image

Stars
268
Rank 153,144 (Top 4 %)
Language
TypeScript
Created almost 2 years ago
Updated about 1 year ago

harlan-zw/nuxt-og-image

harlan-zw

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Enlightened runtime images generated with Vue templates.

nuxt-og-image

Enlightened runtime images generated with Vue templates, for Nuxt.

Status: v2 Released
^{Please report any issues 🐛}
_{Made possible by my Sponsor Program 💖
Follow me @harlan_zw 🐦 • Join Discord for help}

Features

✨ Turn your Vue components into og:image templates
🎨 Design them in the OG Image Playground with full HMR
▲ Render using Satori: Tailwind classes, Google fonts, emoji support and more!
🤖 Or prerender using the Browser: Supporting painless, complex templates
📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

Installation

Install nuxt-og-image dependency to your project:

#
yarn add -D nuxt-og-image
#
npm install -D nuxt-og-image
#
pnpm i -D nuxt-og-image

Add it to your modules section in your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-og-image']
})

Playgrounds

Documentation

📖 Read the full documentation for more information.

Sponsors

License

MIT License © 2023-PRESENT Harlan Wilton

unlighthouse

Scan your entire site with Google Lighthouse in 2 minutes (on average). Open source, fully configurable with minimal setup.

nuxt-seo

The complete SEO solution for Nuxt.

nuxt-delay-hydration

Delayed hydration for progressively enhanced apps. Reduced blocking time and improved Google Lighthouse scores. ⚡️

request-indexing

Find your missing on pages Google and request them to be indexed using the Web Search Indexing API.

nuxt-webpack-optimisations

Make your Nuxt.js webpack builds faster ⚡

harlanzw.com

My personal website built with Nuxt 3 and Nuxt Content 2.

nuxt-simple-sitemap

Powerfully flexible XML Sitemaps that integrate seamlessly, for Nuxt.

nuxt-schema-org

The quickest and easiest way to build Schema.org graphs for Nuxt.

zhead

All of the TypeScript definitions for <head>.

nuxt-simple-robots

(Migrated to @nuxtjs/robots) Tame the robots crawling and indexing your Nuxt site.

nuxt-link-checker

Find and magically fix links that may be negatively effecting your Nuxt sites SEO.

nuxt-seo-utils

SEO utilities to improve your Nuxt sites discoverability and shareability.

unrouted

Unrouted is a minimal, composable router built for speed, portability and DX

nuxt-site-config

Unifying site config with powerful and flexible APIs, for module authors and users.

harlanzw.com-vitepress

My personal blog built using VitePress and TailwindCSS

vue-cli-plugin-import-components

🔌 Automatically import components in your Vue CLI apps.

packrup

Simple utils to pack arrays, objects and strings to a flat object (and back again).

schema-org-graph

Build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Improve your sites SEO with quick and easy Rich Results.

laradock-cli

[Unmaintained] Your new best friend for Laradock.

changelogd

🪵 Aggressively find a packages changelog (or releases) between versions.

wp-keystone

A Wordpress Boilerplate combining the best libraries and practices

laravel-swiftype

Swiftype Integration for Laravel

nuxt-mycelium

to-vite-and-beyond-a-history-and-future-of-bundling

WP-Development-Environment

WorldPress Plugin - Development Environment

nuxt-seo-ui

Deprecated - Nuxt components with Schema.org and SEO integrations

talk-supercharged-head-management

NuxtNation 2022 Talk - VueUse Head v1

laravel-modern-mail

static

blockfolio-php

Blockfolio SDK for PHP - Unofficial

penguin-pass

Laravel / PHP Package for kid friendly passwords

nuxt-og-image-playground

Testing out nitro deployments with nuxt-og-imge.