A curated list of awesome things related to Vue 3


- [Resources](#resources)
    - [Official](#official)
    - [Related awesome lists](#related-awesome-lists)
    - [Articles](#articles)
    - [Packages](#packages)
    - [Examples](#examples)
    - [Tools](#tools)
    - [Videos](#videos)
    - [Books](#books)
    - [Courses](#courses)


# Resources


## Official

- [Official Documentation](https://v3.vuejs.org/)
- [Vue Composition API](https://v3.vuejs.org/guide/introduction.html)
- [RFCs for substantial changes / feature additions to Vue core](https://github.com/vuejs/rfcs)

## Related awesome lists
- [Vite](https://github.com/vitejs/awesome-vite)
- [General](https://github.com/vuejs/awesome-vue)

## Articles

- [Vue 3 – A roundup of infos about the new version of Vue.js](https://madewithvuejs.com/blog/vue-3-roundup)
- [An Overview of What's Coming in Vue 3](https://www.digitalocean.com/community/tutorials/vuejs-whats-coming-in-vue-3)
- [Exciting new features in Vue 3](https://vueschool.io/articles/vuejs-tutorials/exciting-new-features-in-vue-3/)
- [New features in Vue 3 and how to use them](https://blog.logrocket.com/new-features-in-vue-3-and-how-to-use-them/)
- [What Noticeable Features You Should Expect in Vue v3 Release](https://hackernoon.com/what-is-coming-noticeable-in-vue-3-lzd32rx)
- [What New Features for Developers are Coming to Vue.js 3?](https://medium.com/js-dojo/what-new-features-for-developers-are-coming-to-vue-js-3-2f57bf4ac93b)
- [The Vue 3 upgrade guide](https://dev.to/blacksonic/the-vue-3-upgrade-guide-4dc4)
- [Build a movie search app using the Vue Composition API](https://dev.to/blacksonic/build-a-movie-search-app-using-the-vue-composition-api-5218)
- [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr)
- [Composition API cheat sheet](https://www.vuemastery.com/vue-3-cheat-sheet/)
- [Building the Same Component in Vue2 vs. Vue3](https://medium.com/javascript-in-plain-english/building-the-same-component-in-vue2-vs-vue3-ed47a09ade15)
- [Suspense – new feature in Vue 3](https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/)
- [State Management with Composition API](https://vueschool.io/articles/vuejs-tutorials/state-management-with-composition-api/)
- [Portal – a new feature in Vue 3](https://vueschool.io/articles/vuejs-tutorials/portal-a-new-feature-in-vue-3/)
- [Faster Web Applications with Vue 3](https://vueschool.io/articles/vuejs-tutorials/faster-web-applications-with-vue-3/)
- [Why people got upset with Vue 3](https://vueschool.io/articles/news/why-people-are-mad-with-vue-3/)
- [Vue 3: Data down, Events up](https://www.vuemastery.com/blog/vue-3-data-down-events-up/)
- [Vue 3: Start Using it Today](https://www.vuemastery.com/blog/vue-3-start-using-it-today/)
- [Reactivity: Vue 2 vs Vue 3](https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/)
- [Top ways to learn Vue 3](https://www.vuemastery.com/blog/top-ways-to-learn-Vue-3/)
- [A useModal hook and Proxies](https://lmiller1990.github.io/electic/posts/20200519_a_usemodal_hook_and_proxies.html)
- [Vite the Fastest Development Environment Ever](https://lmiller1990.github.io/electic/posts/20200510_vite_the_fastest_development_environment_ever.html)
- [Vue 3 Async Components and Bundle Splitting](https://lmiller1990.github.io/electic/posts/20200503_vue_3_async_components_and_bundle_splitting.html)
- [Introducing Teleport aka Portal](https://lmiller1990.github.io/electic/posts/20200411_introducing_teleport_aka_portal.html)
- [Webpack for Vue 3](https://lmiller1990.github.io/electic/posts/20200406_webpack_for_vue_3.html)
- [Best Practices for Testing Vue 3 Components](https://lmiller1990.github.io/electic/posts/20200301_best_practices_for_testing_vue_3_components.html)
- [Vuejs 3 and TypeScript](https://lmiller1990.github.io/electic/posts/20200215_vuejs_3_and_typescript.html)
- [Reactivity in Vue 3](https://www.netlify.com/blog/2020/03/10/reactivity-in-vue-3/)
- [What Does Vue 3.0 Mean for Web Development?](https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138)
- [How to Use Vue’s watchEffect to Track Reactive Dependencies](https://medium.com/better-programming/using-vue-watcheffect-to-track-reactive-dependencies-7c99d76304e7)
- [Vue 3's Global Mounting](http://wildermuth.com/2020/05/17/Vue-3-s-Global-Mounting)
- [Where Did Filters Go in Vue 3?](http://wildermuth.com/2020/05/11/Where-Did-Filters-Go-in-Vue-3)
- [Go async in Vue 3 with Suspense](https://vuedose.tips/go-async-in-vue-3-with-suspense/)
- [Faster hot reloading for Vue development with Vite](https://www.vuemastery.com/blog/faster-hot-reloading-for-vue-development-with-vite/)
- [Create a i18n Plugin with Composition API in Vue.js 3](https://vuedose.tips/create-a-i18n-plugin-with-composition-api-in-vuejs-3/)
- [Clean, Scalable Forms with Vue Composition API](https://medium.com/js-dojo/clean-scalable-forms-with-vue-composition-api-6db03cccabde)
- [Easily switch to Composition API in Vue.js 3](https://vuedose.tips/easily-switch-to-composition-api-in-vuejs-3/)
- [Use old instance properties in Composition API in Vue.js 3](https://vuedose.tips/use-old-instance-properties-in-composition-api-in-vuejs-3/)
- [Access template refs in Composition API in Vue.js 3](https://vuedose.tips/access-template-refs-in-composition-api-in-vuejs-3/)
- [The process: Making Vue 3](https://increment.com/frontend/making-vue-3/)
- [Context and Provider Pattern with the Vue 3 Composition API](https://markus.oberlehner.net/blog/context-and-provider-pattern-with-the-vue-3-composition-api/)
- [Understanding Reactivity in Vue 3.0](https://dev.to/jinjiang/understanding-reactivity-in-vue-3-0-1jni)
- [Set up Vue 3 linting in VSCode](https://blog.simohamed.tech/blog/vue3-lint/)
- [Headless Testing with Vite + Vue-Test-Utils](https://dev.to/aelbore/headless-testing-with-vite-vue-test-utils-3jd1)
- [Use Composition API to easily handle API requests in Vue.js](https://vuedose.tips/use-composition-api-to-easily-handle-api-requests-in-vue-js/)
- [You Might Not Need Vuex with Vue 3](https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4)
- [Writing a vite plugin](https://medium.com/@axwdev/writing-a-vite-plugin-for-vue-3-5bcc1c0915e0)
- [Be prepared to migrate your Vue app to Vue 3](https://dev.to/chenxeed/be-prepared-to-migrate-your-vue-app-to-vue-3-eom)
- [What’s New in Vue 3](https://www.grapecity.com/blogs/whats-new-in-vue-3)
- [What the Heck is Vite?](https://www.wrappixel.com/what-the-heck-is-vite/)
- [Cool Features of Vue Router 4](https://vuejsdevelopers.com/topics/vue-router/)
- [Watch with @vue/reactivity](https://antfu.me/posts/watch-with-reactivity/)
- [Handling Asynchrony in Vue 3 / Composition API](https://medium.com/javascript-in-plain-english/handling-asynchrony-in-vue-3-composition-api-part-1-managing-async-state-e993842ebf8f)
- [Handling Asynchrony with Vue Composition API and vue-concurrency](https://medium.com/javascript-in-plain-english/handling-asynchrony-with-vue-composition-api-and-vue-concurrency-part-2-canceling-throttling-4e0305c82367)
- [Building a data layer with Vue and Composition API](https://medium.com/javascript-in-plain-english/building-a-data-layer-with-vue-and-composition-api-547cc9761b4c)
- [Should You Use Composition API as a Replacement for Vuex?](https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/)
- [Nuxt Composition API](https://vueschool.io/articles/vuejs-tutorials/nuxt-composition-api/)

## Packages

- [vue-next](https://github.com/vuejs/vue-next) - Repo for Vue 3.0
- [vue-cli-plugin-vue-next](https://github.com/vuejs/vue-cli-plugin-vue-next) - A Vue CLI plugin for trying out vue-next (experimental)
- [vue-router-next](https://github.com/vuejs/vue-router-next) - The Vue 3 official router (WIP)
- [vue-test-utils-next](https://github.com/vuejs/vue-test-utils-next) - The next iteration of Vue Test Utils, targeting Vue 3
- [composition-api](https://github.com/vuejs/composition-api) - Vue2 plugin for the Composition API.
- [vite](https://github.com/vitejs/vite) - Native-ESM powered web dev build tool. It's fast.
- [vitepress](https://github.com/vuejs/vitepress) - Vite & Vue powered static site generator
- [vue-use-web](https://github.com/logaretm/vue-use-web) - 🕸 Web APIs implemented as Vue.js composition functions
- [vee-validate](https://github.com/logaretm/vee-validate/tree/next) - VeeValidate (v4) Vue 3 Template driven form validation
- [vuelidate-next](https://github.com/vuelidate/vuelidate/tree/next) - Vuelidate (next) - Simple, lightweight model-based validation
- [vue-compose-promise](https://github.com/posva/vue-compose-promise) - 💝 Promises using vue composition API
- [vue-composition-toolkit](https://github.com/shuidi-fed/vue-composition-toolkit) - 💚 Vue3 Composition-API toolkit
- [vue-composable](https://github.com/pikax/vue-composable) - Vue composition-api composable components
- [vueuse](https://github.com/antfu/vueuse) - 🧰 Collection of essential Vue Composition API utils works for Vue 2 and 3
- [vue-use-kit](https://github.com/microcipcip/vue-use-kit) - 🛠️ Useful collection of Vue composition API functions
- [vue-condition-watcher](https://github.com/runkids/vue-condition-watcher) - 🕶 Vue Composition API for automatic fetch data when condition has been changed
- [vue-router-compositions](https://github.com/greenpress/vue-router-compositions) - VueRouter Composition-API utils library
- [vue-use-switch-map](https://github.com/jfet97/vue-use-switch-map) - 👽 The power of the RxJS switchMap operator injected into the Vue composition world
- [vue-use-infinite-scroll](https://github.com/jfet97/vue-use-infinite-scroll) - ♾️ A Vue composition function that makes infinite scroll a breeze
- [vuehooks](https://github.com/jsbroks/vuehooks) - 🌟 Collection of utility composition functions for Vue
- [vue-cookie-next](https://github.com/anish2690/vue-cookie-next) - 🍪 A vue 3 plugin for handling browser cookies with typescript support.
- [vue-draggable-next](https://github.com/anish2690/vue-draggable-next) - 🧱 A Vue 3 drag-and-drop component based on Sortable.js.
- [vue-float-menu](https://github.com/prabhuignoto/vue-float-menu) - Customizable Floating Menu for Vue 3
- [vue-toastification](https://github.com/Maronato/vue-toastification) - 🍞 Light, easy, and beautiful Toasts for Vue 2 and 3.
- [vue3-scroll-picker](https://github.com/HJ29/vue3-scroll-picker) - A scroll picker component for Vue 3.
- [vue-concurrency](https://github.com/MartinMalinda/vue-concurrency) - 🚦 A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.
- [vue-inline-svg](https://github.com/shrpne/vue-inline-svg) - Vue component loads an SVG source dynamically and inline `<svg>` so you can manipulate the style of it with CSS or JS. Works for Vue 2 and 3.
- [vue-3-sanitize](https://github.com/vannsl/vue-3-sanitize) - HTML sanitizer for Vue.js 3 apps
- [echarts-for-vue](https://github.com/ambit-tsai/echarts-for-vue) - 📊📈ECharts wrapper component for Vue 3 and 2
- [headlessui-vue](https://github.com/tailwindlabs/headlessui/tree/develop/packages/%40headlessui-vue) - A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.
- [vue3-spring](https://github.com/ismail9k/vue3-spring) - A spring-physics based animation library, in addition to more components, to cover most of the UI related animations.
- [vue3-carousel](https://github.com/ismail9k/vue3-carousel) - Modern lightweight carousel component built for Vue 3.
- [vue3-tabs](https://github.com/HJ29/vue3-tabs) - A swipeable tabs component for vue 3.
- [particles.vue3](https://github.com/matteobruni/tsparticles/blob/master/components/vue3/README.md) - A lightweight library for easily create highly customizable particles animations for websites
- [vue-final-modal](https://github.com/hunterliu1003/vue-final-modal) - A renderless, lightweight, feature-rich modal component for Vue 3.
- [vueper-slides](https://antoniandre.github.io/vueper-slides) - A touch ready and responsive slideshow / carousel for Vue and Vue 3.
- [splitpanes](https://antoniandre.github.io/splitpanes) - A Vue and Vue 3 reliable, simple and touch-ready panes splitter / resizer.
- [vue-cal](https://antoniandre.github.io/vue-cal) - A Vue and Vue 3 full calendar, no dependency, no BS. 🤘
- [wave-ui](https://antoniandre.github.io/wave-ui) - An emerging UI framework for Vue.js & Vue 3 with only the bright side. ☀️
- [vant](https://github.com/youzan/vant) - Lightweight Mobile UI Components built on Vue 3
- [vue-hooks-form](https://github.com/beizhedenglong/vue-hooks-form) - Building forms with Vue composition API 
- [vue-visibility](https://github.com/lewandy/vue-visibility) - Vue plugin that hides or shows elements depending of a criteria. 👀
- [vue-responsive-video-background-player](https://github.com/avidofood/vue-responsive-video-background-player) - Play your own videos in background responsively in different resolutions.

## Examples

- [vue-3-playground](https://github.com/blacksonic/vue-3-playground) - Vue 3 Playground packed with all the new features
- [vue3-webpack-boilerplate](https://github.com/starkovsky/vue3-webpack-boilerplate) - Vue 3 Webpack Boilerplate (Vue 3, Vue Router 4, Vuex 4, Typescript)
- [vue-composition-toolkit](https://github.com/HcySunYang/vue-composition-toolkit) - 🔫 Vue3 Composition-API toolkit
- [vite-tailwind-starter](https://github.com/posva/vite-tailwind-starter) - Starter using Vite + Tailwind for super fast prototyping
- [todomvc-vue-composition-api](https://github.com/blacksonic/todomvc-vue-composition-api) - TodoMVC built with Vue 3 Composition Api and Vuex
- [composition-api-demos](https://github.com/LinusBorg/composition-api-demos) - A Vue.js app demonstarting various use cases for the new composition API
- [Vue3Todo](https://github.com/ShetlandJ/Vue3Todo) - A repository showcasing the new Vue 3.0 Composition API with simple examples
- [movie-search-vue](https://github.com/blacksonic/movie-search-vue) - Movie search app with the Vue 3 Composition API
- [vue-next-webpack-preview](https://github.com/vuejs/vue-next-webpack-preview) - Minimal webpack setup for Vue 3 (beta)
- [vue-3-reactivity](https://github.com/Code-Pop/vue-3-reactivity) - Code from the Vue 3 Reactivity course
- [vue-cart with import-maps](https://github.com/aelbore/vue-cart/tree/vue3-composition-api) - Basic Shopping Cart with Vue ES Module and Composition API (without bundler or build step)

## Tools

- [aria-vue](https://github.com/aelbore/aria-vue) - Headless testing with Vite + Vue + Vue-Testting-Utils

## Videos

- [Evan You - State of the Vuenion 2020](https://www.youtube.com/watch?v=3COrQGxnPv0)
- [Alex Kyriakidis - What you'll love in Vue 3](https://www.youtube.com/watch?v=eQpVcZa8dVQ)
- [Evan You - What's Coming in Vue 3](https://www.softwaretalks.io/v/10323/evan-you-whats-coming-in-vue-3-0)
- [Vue 3: What I'm Most Excited About with Chris Fritz](https://www.youtube.com/watch?v=b554XmaTWrw)
- [Live coding: The new Composition API - Jason Yu](https://www.youtube.com/watch?v=JON6X6Wmteo)
- [Natalia Tepluhina - You might not need Vuex](https://www.youtube.com/watch?v=sjB6wamZQN0)
- [Design Principles of Vue 3.0 by Evan You](https://www.youtube.com/watch?v=WLpLYhnGqPA)
- [Why the Vue 3 Composition API?](https://www.youtube.com/watch?v=6HUjDKVn0e0)
- [Vue 3 and Composition API by Alex Kyriakidis](https://www.youtube.com/watch?v=ysnbEVkvgm4)
- [Thorsten Lünborg - Composition API Best Practices](https://www.youtube.com/watch?v=6D58SI9P-aU)
- [Damian Dulisz - Vuelidate version for Vue 3.0](https://www.youtube.com/watch?v=5-Z-EmTnDyU)
- [The State of Vue.js in 2020 - Why You Should Make The Leap - Gwendolyn Faraday](https://www.youtube.com/watch?v=eiUgVa2Td_k)
- [Full-Stack TypeScript with Vue.js 3, Node.js and PostgreSQL](https://www.youtube.com/watch?v=rLAElFkRrWI&list=PLhXZp00uXBk5hnHEIAFl74mZyLrVKKJAD)
- [Vue 3: The Future of Front End](https://www.youtube.com/watch?v=dNBLq6aLpCA)

## Books

- [Become a Ninja with Vue (EN and FR versions)](https://books.ninja-squad.com/vue)
- [Vue.js 3 Cookbook](https://www.packtpub.com/product/vue-js-3-cookbook/9781838826222)

## Courses

- [The Vue.js 3 Master Class](https://vueschool.io/courses/the-vuejs-3-master-class)
- [What's new in Vue 3](https://vueschool.io/courses/whats-new-in-vue-3)
- [Vue 3 Essentials](https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/)
- [Vue 3 Deep Dive with Evan You](https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview/)
- [Build a Gmail Clone with Vue 3](https://www.vuemastery.com/courses/build-a-gmail-clone-with-vue3/tour-the-project)
- [Vue 3 Reactivity](https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity/)
- [Vue.js: The Composition API](https://vuejs-course.com/courses/vuejs-3-composition-api)
- [The Complete Vue.js 3 Crash Course](https://vuejs-course.com/courses/vuejs-3-complete-crash-course)
- [From Vue 2 to Vue 3](https://www.vuemastery.com/courses/from-vue2-to-vue3/from-vue-2-to-vue-3/)
- [Become a Ninja with Vue - online training (EN and FR versions)](https://vue-exercises.ninja-squad.com)
- [Introduction to Vue 3](https://frontendmasters.com/courses/vue-3/)