/vuejs-challenges

Collection of Vue.js challenges

Primary LanguageTypeScriptMIT LicenseMIT

Collection of Vue.js challenges

English | 简体中文

📖 Introduction

I love Vue.js ♥️. It's so Awesome 🚀. It helps me finish my work well and build applications.

I was looking for a project for everyone to learn Vue.js together, and that's why this project was born. I believe we can grow together here, and hope it helps you.

This project is aimed at helping you better understand Vue.js, writing your own utilities, or just having fun with the challenges.

We are also trying to form a community where you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

✏️ Challenges

Click the following badges to see details of the challenges.

1
1・Hello World

10
10・Lifecycle Hooks 11・Next DOM update flush 13・DOM Portal 14・Dynamic css values 2・ref family 3・losing-reactivity 4・writable-computed 5・watch family 6・shallow ref 9・Dependency Injection

12
12・Optimize performance directive 15・useToggle 16・until 17・useCounter 18・useLocalStorage 19・v-focus 20・v-debounce-click 21・functional component 25・useMouse 27・Global CSS 7・Raw API 8・effectScope API

4
22・custom element 23・custom ref 24・v-active-style 26・v-model

By Tags
#Built-ins13・DOM Portal 12・Optimize performance directive
#CSS Features14・Dynamic css values 27・Global CSS
#Components13・DOM Portal 21・functional component
#Composable Function15・useToggle 17・useCounter 18・useLocalStorage 25・useMouse
#Composition API10・Lifecycle Hooks 2・ref family 3・losing-reactivity 4・writable-computed 5・watch family 6・shallow ref 9・Dependency Injection 8・effectScope API 23・custom ref
#Directives12・Optimize performance directive 19・v-focus 20・v-debounce-click 24・v-active-style 26・v-model
#Global API:General11・Next DOM update flush
#Lifecycle10・Lifecycle Hooks
#Reactivity:Advanced6・shallow ref 7・Raw API 8・effectScope API 23・custom ref
#Reactivity:Core2・ref family 4・writable-computed 5・watch family
#Reactivity:Utilities3・losing-reactivity
#Utility Function16・until
#Web Components22・custom element

🤝 How to Contribute

There are several ways you can contribute to this project

  • Share your answers/solutions
  • Propose new challenges
  • Add more test cases to the existing challenges
  • Provide learning resources or ideas of how to solve challenges
  • Share the problems you have faced in real-world projects, regardless you have the solution or not - the community would help you as well.
  • Help others by discussing issues

Just open an issue and choose the corresponding template. Thanks!

🌸 Credits

This project is highly inspired by type-challenges ♥️.

vuejs/repl makes this project possible ♥️.

📄 License

MIT LICENSE