@git-stats-components/vue

> Beautiful contribution graphs for Vue 3


Demo

View Live Demo

!Git Stats Components
!Git Stats Components

Installation

``bash
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



`

$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



`

Composable

Access data and state directly with the useGitStats composable:

`vue



`

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
}
``

$3

Go to Settings → Secrets and variables → Actions and add your tokens.

That's it! The GitHub Action will fetch your stats daily.

For more details, see the main git-stats-components repository.

License

MIT © Derek Johnston