Beautiful GitHub/GitLab/Bitbucket contribution graphs for Vue 3
npm install @git-stats-components/vuebash
npm install @git-stats-components/vue
`
Quick Start
`vue
`
Components
$3
GitHub-style contribution heatmap.
Props:
- dataUrl (string) - Path to stats JSON file (default: /data/git-stats.json)
- profileIndex (number) - Which profile to display (default: 0)
- colorScheme ('green' | 'blue' | 'purple' | 'orange') - Color theme (default: 'green')
- showSettings (boolean) - Show color scheme dropdown (default: true)
- cacheTTL (number) - Cache duration in milliseconds
Events:
- @day-click - Emitted when a day is clicked ({ date: string, count: number })
- @color-scheme-change - Emitted when color scheme changes
Example:
`vue
data-url="/data/git-stats.json"
:profile-index="0"
color-scheme="blue"
:show-settings="true"
@day-click="handleDayClick"
@color-scheme-change="handleColorChange"
/>
`
$3
Project and commit count statistics.
Props:
- dataUrl (string) - Path to stats JSON file
- profileIndexes (number[]) - Which profiles to aggregate (default: [])
- experienceData (ExperienceEntry[]) - Work experience for years calculation
- showCustomStat (boolean) - Show custom stat (default: true)
- customStatCalculator (function) - Custom stat calculation function
Slots:
- icon-experience - Custom icon for experience stat
- icon-projects - Custom icon for projects stat
- icon-commits - Custom icon for commits stat
- icon-custom - Custom icon for custom stat
- custom-stat-label - Custom label for custom stat
Example:
`vue
data-url="/data/git-stats.json"
:experience-data="experienceData"
:show-custom-stat="true"
:custom-stat-calculator="calculatePizzas"
>
🍕
Pizzas Ordered
`
Composable
Access data and state directly with the useGitStats composable:
`vue
Loading...
Error: {{ error.message }}
{{ dataSourceText }}
{{ lastUpdatedText }}
{{ JSON.stringify(data, null, 2) }}
`
TypeScript Support
Full TypeScript support with exported types:
`typescript
import type {
GitStatsData,
ColorScheme,
Platform,
ExperienceEntry,
CustomStatCalculator
} from '@git-stats-components/vue'
const colorScheme: ColorScheme = 'green'
const experienceData: ExperienceEntry[] = [
{
startDate: '2020-01-01',
endDate: null,
skills: ['JavaScript', 'Vue', 'TypeScript']
}
]
const customCalculator: CustomStatCalculator = ({ projects, commits, years }) => {
return (projects 2 + commits 0.5).toFixed(0)
}
`
Plugin Usage
Register globally in your Vue app:
`typescript
import { createApp } from 'vue'
import VueGitStats from '@git-stats-components/vue'
import '@git-stats-components/vue/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(VueGitStats)
app.mount('#app')
`
Then use without imports:
`vue
`
Nuxt 3
`vue
`
Styling
Override CSS variables for custom theming:
`css
.git-contribution-graph {
--graph-bg: #0d1117;
--graph-text: #e6edf3;
--graph-border: #30363d;
}
/ Or target specific classes /
.contribution-day.level-4.green {
background-color: #00ff00 !important;
}
`
Setup
$3
Initialize in your project:
`bash
npx @git-stats-components/vue init
`
This creates:
- git-stats.config.js - Configuration file
- .github/workflows/update-git-stats.yml - GitHub Action workflow
- public/data/ - Directory for stats data
$3
Edit git-stats.config.js:
`javascript
export default {
profiles: [
{
username: 'your-github-username',
platform: 'github',
tokenSecret: 'GITHUB_TOKEN'
}
],
dataPath: 'public/data/git-stats.json',
schedule: '0 2 *' // Daily at 2 AM UTC
}
``