[Windows Phone 8 General] Samar Musthafa:
Hey there, Web developers!

Are you ready to embark on an exciting open-source journey? We invite you to contribute to Metro-UI-Vue-Mobile, an innovative VueJS Component Library designed exclusively for mobile devices, inspired by the iconic Metro UI from Windows Phone 8.1!

Introducing Metro-UI-Vue-Mobile:

What is Metro-UI-Vue-Mobile? Metro-UI-Vue-Mobile is a mobile-first Vue project that offers an extensive collection of components following the Metro UI design philosophy. We've taken the latest Vue version and customized it to include the essential Metro UI-based components, making it easier than ever to build stunning mobile applications.

Figma Designs to Fuel Your Creativity: To ensure seamless development and visual consistency, we've prepared detailed Figma designs and UI layouts. Check them out here and get inspired!

Recommended IDE Setup for Smooth Development: We want to make the development process as smooth as possible for you. That's why we recommend using Visual Studio Code with the Volar extension (disable Vetur) and the TypeScript Vue Plugin (Volar). This setup enhances the TypeScript language service's awareness of .vue types and ensures faster development.

Components that Bring Metro UI to Life: Our library includes a range of exciting components that effectively simulate the Metro UI. Here are some of the key components you'll find in Metro-UI-Vue-Mobile:

Appbar: The Appbar is a fixed component always visible at the bottom of the screen. It features circular buttons, toggleable by tapping on the three dots. Customize it effortlessly with props like "title" and "route."

App Title: Display your app's name with pride using the App Title component. It remains fixed at the top of the screen and accepts the app title as a prop.

Page View [WIP]: This container component displays your page's content and snaps to the next page when scrolled. Implement smooth page transitions using the provided code for simple gestures.

Page Title: Nested inside the Page View component, Page Titles show the titles of different pages. Each Page Title accepts a string as a prop.

Toggle [UNANIMATED]: The Toggle component allows you to display an interactive toggle. It supports a disabled display-only mode and returns a value that can be read using v-model.

TextBox: The TextBox component handles basic text input and supports a disabled display-only mode. Similar to the Toggle, it returns a value that can be read using v-model.

How Can You Contribute?

Fork the Metro-UI-Vue-Mobile repository from GitHub and create a pull request to share your contributions.

Read our Contributing Guidelines for a seamless collaboration experience.

Reporting Issues and Feedback: We value your input! If you encounter any bugs or have suggestions for improvement, create an issue in the Issues tab, making sure to follow our Issue Guidelines.

Get in Touch: For any queries or to discuss your ideas, feel free to reach out to us at samarmusthafa2014@gmail.com.

Credits: A big shoutout to the project maintainer, god-s-perfect-idiot, for laying the foundation of Metro-UI-Vue-Mobile!

License: Metro-UI-Vue-Mobile is licensed under the GNU GPL v3.0. You can find the full license details in the LICENSE file at the root directory.

Join us in bringing the iconic Metro UI design to VueJS mobile applications! Together, we can create an outstanding library that empowers developers to build visually stunning and user-friendly mobile experiences. Let's make Metro-UI-Vue-Mobile the go-to component library for VueJS enthusiasts!

See you on the GitHub repository! Happy coding! 😄🚀