og-image
nuxt-og-image

Vueテンプレートで生成される、進化したランタイム画像。
Nuxt OG Image DevTools Preview

nuxt-og-image

npm versionnpm downloadsLicenseNuxt

Nuxt OG Imageを使用すると、Vueコンポーネントまたはページのスクリーンショットを使用して、OG画像を簡単に生成できます。

OG画像は、ソーシャルメディアでのクリック率を向上させることが知られています。

Open Graphを初めて使用しますか?このモジュールが必要な理由の詳細については、Open Graphタグをマスターするガイドをご確認ください。

私のスポンサープログラム💖によって実現しました
私をフォローしてください@harlan_zw 🐦 • ヘルプはDiscordに参加してください

機能

  • ✨ 組み込みテンプレートを使用するか、Vueコンポーネントで独自のog:imageを作成
  • 🎨 Nuxt DevToolsのOG Image Playgroundで、完全なHMRを使用してog:imageをデザインおよびテスト
  • Satoriを使用してレンダリング:Tailwind / UnoCSSとテーマ、Googleフォント、6種類の絵文字ファミリーなどをサポート!
  • 🤖 またはブラウザを使用してプリレンダリング:複雑なテンプレートを簡単にサポート
  • 📸 面倒くさいですか?すべてのページでスクリーンショットを生成するだけ:要素を非表示にしたり、アニメーションを待ったりなど
  • ⚙️ エッジで動作:Vercel Edge、Netlify Edge、Cloudflare Workers

インストール

プロジェクトにnuxt-og-imageの依存関係をインストールします

npx nuxi@latest module add og-image

ドキュメント

詳細については、📖 完全なドキュメントをお読みください

デモ

スポンサー

ライセンス

MITライセンスに基づいてライセンスされています。