説明
ブログ記事の概要（サムネイル、タイトル、日付、カテゴリ、スキルタグ）を表示するカードコンポーネントです。
使用技術
- Vue 3
- Tailwind CSS
デモ
デフォルト表示 (V1) 反映中
現在の状態 (Reactive State)
version:v1|
item:{
"id": "sample-1",
"slug": "sample-article",
"title": "AstroとVue 3で構築するモダンなブログサイト",
"excerpt": "この記事では、Astroの高速な静的サイト生成機能と、Vue 3の強力なインタラクティブ性を組み合わせてブログサイトを構築する方法を解説します。",
"thumbnail_url": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=800&auto=format&fit=crop",
"category": "frontend",
"skills": [
"Astro",
"Vue 3",
"TypeScript"
],
"published_at": "2026-09-12T00:00:00Z",
"updated_at": "2026-09-12T00:00:00Z"
}|
categoryLabel:フロントエンド|
AstroとVue 3で構築するモダンなブログサイト
この記事では、Astroの高速な静的サイト生成機能と、Vue 3の強力なインタラクティブ性を組み合わせてブログサイトを構築する方法を解説します。
#Astro #Vue 3 #TypeScript
設計意図
記事一覧において、各記事の情報を簡潔かつ魅力的に伝えるためのコンポーネントです。ホバー時のアニメーションやレスポンシブ対応が含まれています。
課題点・今後の展望
- 長いタイトルや抜粋文の三点リーダー表示の最適化
- 画像の読み込み遅延時のプレースホルダー表示