Can I develop a vue version of Fluent UI myself

[share121]

I'd like to develop a Vue version of Fluent UI and host it on Github under the MIT License.

[Yiosko]

✅ Project Overview: Fluent UI for Vue

Goal:
Create a UI library based on Microsoft Fluent Design, compatible with the Vue.js ecosystem.

Example name:
fluent-ui-vue or vue-fluent-ui

---

🏁 Getting Started

1. Project Setup

Use Vue 3 + Vite for modern development.

npm init vue@latest fluent-ui-vue
cd fluent-ui-vue
npm install

2. Folder Structure

Example:

fluent-ui-vue/
├── src/
│   ├── components/
│   │   ├── Button.vue
│   │   ├── TextField.vue
│   │   └── ...
│   ├── index.ts
├── docs/
├── tests/
├── vite.config.ts
├── package.json
└── LICENSE

3. Start with Core Components

Begin with reusable building blocks:

• Button.vue
• TextField.vue
• Checkbox.vue
• Dialog.vue
• TeachingBubble.vue (since you're already familiar!)

Design them according to Fluent UI principles (colors, spacing, motion, etc.). You can reference Fluent UI React for behavior, but write from scratch in Vue.

---

📦 Publishing as a Package

In package.json:

{
  "name": "vue-fluent-ui",
  "version": "0.1.0",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    }
  },
  ...
}

Then when you're ready:

npm publish --access public

---

🛡 License: MIT

To use the MIT License, just include a LICENSE file at the root with the following:

MIT License

Copyright (c) 2025 [Your Name]

Permission is hereby granted, free of charge, to any person obtaining a copy...

(You can generate it automatically on GitHub too when creating a repo.)

---

🚀 Open Source on GitHub

1. Create a new repo: https://github.com/new
2. Push your code:

git init
git remote add origin https://github.com/YOUR_USERNAME/vue-fluent-ui.git
git add .
git commit -m "Initial commit"
git push -u origin main

3. Add:
   • README.md with badges, install info, usage examples.
   • LICENSE (MIT)
   • GitHub Topics: vue, fluent-ui, ui-library, open-source, etc.

---

✨ Bonus: Other Suggestions

• Use unocss or tailwindcss for utility-first theming.
• Consider supporting both light & dark mode.
• Use Vitest or Jest + @vue/test-utils for unit tests.
• Offer Storybook or VitePress documentation.

---

Would you like me to:

• Generate the base code for one component (like a Fluent-style Button.vue)?
• Set up a GitHub repo boilerplate you can clone?
• Help design the component API for consistency with Fluent UI?

Let me know how hands-on you'd like to get!