🍴 Git Fork Vue

Beautiful, customizable GitHub fork badges for Vue 3 applications

🌐 Live Demo • 📚 Documentation • ⚛️ React Version

---

✨ Features

🎨 3 Beautiful Styles - Choose from corners, ribbons, or trapezium designs
🎯 Flexible Positioning - Place anywhere on your page (left/right, top/bottom)
🌈 Full Customization - Custom colors, content, and styling
⚡ Vue 3 Ready - Built with modern Vue 3 and TypeScript
📱 Responsive - Works perfectly on all screen sizes
🚀 Zero Dependencies - Lightweight and fast

灵感来源

• github-corners
• github-ribbons

🚀 Quick Start

Installation

# npm
npm install @simon_he/git-fork-vue

# yarn  
yarn add @simon_he/git-fork-vue

# pnpm
pnpm add @simon_he/git-fork-vue

Usage

<script setup>
import GitForkVue from '@simon_he/git-fork-vue'
</script>

<template>
  <!-- Basic usage -->
  <GitForkVue link="https://github.com/Simon-He95/git-fork-vue" />
  
  <!-- Customized ribbon style -->
  <GitForkVue
    link="https://github.com/Simon-He95/git-fork-vue"
    type="ribbons"
    position="left"
    content="Fork Me!"
    color="#ff6b6b"
  />
  
  <!-- Corner style with custom positioning -->
  <GitForkVue
    link="https://github.com/Simon-He95/git-fork-vue"
    type="corners"
    position="right"
    top="100px"
  />
</template>

🎨 API Reference

Property	Type	Default	Description
link	string	Required	GitHub repository URL
type	'corners' | 'ribbons' | 'trapeziumType'	'corners'	Badge style type
position	'left' | 'right'	'right'	Badge position
content	string	'Fork me on GitHub'	Display text
color	string	'#24292e'	Background color
top	string	-	Custom top positioning
bottom	string	-	Custom bottom positioning

🎭 Style Examples

🔘 Corners Style

Perfect for a subtle, elegant look that doesn't interfere with your content.

🎀 Ribbons Style

Eye-catching ribbons that add a playful touch to your website.

🔶 Trapezium Style

Modern geometric design for contemporary applications.

💡 Inspiration

This project was inspired by these awesome libraries:

• github-corners - Elegant corner badges
• github-ribbons - Classic ribbon designs

🛠️ Development

# Clone the repository
git clone https://github.com/Simon-He95/git-fork-vue.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build

# Run tests
pnpm test

🌟 Ecosystem

Package	Description
@simon_he/git-fork-vue	Vue 3 version
@simon_he/git-fork-react	React version

📄 License

MIT License © 2024 Simon He

☕ Support

If this project helped you, consider buying me a coffee!

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

---

⬆ Back to Top

Made with ❤️ by Simon He