Awesome Vue 3
A curated list of awesome things related to Vue 3
Resources
Official
- Official Documentation
- Vue Composition API
- RFCs for substantial changes / feature additions to Vue core
Related awesome lists
Articles
- Vue 3 – A roundup of infos about the new version of Vue.js
- An Overview of What's Coming in Vue 3
- Exciting new features in Vue 3
- New features in Vue 3 and how to use them
- What Noticeable Features You Should Expect in Vue v3 Release
- What New Features for Developers are Coming to Vue.js 3?
- The Vue 3 upgrade guide
- Build a movie search app using the Vue Composition API
- React Hooks vs. Vue 3 Composition API
- Composition API cheat sheet
- Building the Same Component in Vue2 vs. Vue3
- Suspense – new feature in Vue 3
- State Management with Composition API
- Portal – a new feature in Vue 3
- Faster Web Applications with Vue 3
- Why people got upset with Vue 3
- Vue 3: Data down, Events up
- Vue 3: Start Using it Today
- Reactivity: Vue 2 vs Vue 3
- Top ways to learn Vue 3
- A useModal hook and Proxies
- Vite the Fastest Development Environment Ever
- Vue 3 Async Components and Bundle Splitting
- Introducing Teleport aka Portal
- Webpack for Vue 3
- Best Practices for Testing Vue 3 Components
- Vuejs 3 and TypeScript
- Reactivity in Vue 3
- What Does Vue 3.0 Mean for Web Development?
- How to Use Vue’s watchEffect to Track Reactive Dependencies
- Vue 3's Global Mounting
- Where Did Filters Go in Vue 3?
- Go async in Vue 3 with Suspense
- Faster hot reloading for Vue development with Vite
- Create a i18n Plugin with Composition API in Vue.js 3
- Clean, Scalable Forms with Vue Composition API
- Easily switch to Composition API in Vue.js 3
- Use old instance properties in Composition API in Vue.js 3
- Access template refs in Composition API in Vue.js 3
- The process: Making Vue 3
- Context and Provider Pattern with the Vue 3 Composition API
- Understanding Reactivity in Vue 3.0
- Set up Vue 3 linting in VSCode
- Headless Testing with Vite + Vue-Test-Utils
- Use Composition API to easily handle API requests in Vue.js
- You Might Not Need Vuex with Vue 3
- Writing a vite plugin
- Be prepared to migrate your Vue app to Vue 3
- What’s New in Vue 3
- What the Heck is Vite?
- Cool Features of Vue Router 4
- Watch with @vue/reactivity
- Handling Asynchrony in Vue 3 / Composition API
- Handling Asynchrony with Vue Composition API and vue-concurrency
- Building a data layer with Vue and Composition API
- Should You Use Composition API as a Replacement for Vuex?
- Nuxt Composition API
- Creating Custom Hooks with Vue 3 & Typescript
Packages
- vue-next - Repo for Vue 3.0
- vue-cli-plugin-vue-next - A Vue CLI plugin for trying out vue-next (experimental)
- vue-router-next - The Vue 3 official router (WIP)
- vue-test-utils-next - The next iteration of Vue Test Utils, targeting Vue 3
- composition-api - Vue2 plugin for the Composition API.
- vite - Next generation frontend tooling. It's fast.
- vitepress - Vite & Vue powered static site generator
- vue-use-web -
🕸 Web APIs implemented as Vue.js composition functions - vee-validate - VeeValidate (v4) Vue 3 Template driven form validation
- vuelidate-next - Vuelidate (next) - Simple, lightweight model-based validation
- vue-compose-promise -
💝 Promises using vue composition API - vue-composition-toolkit -
💚 Vue3 Composition-API toolkit - vue-composable - Vue composition-api composable components
- vueuse -
🧰 Collection of essential Vue Composition API utils works for Vue 2 and 3 - vue-use-kit -
🛠️ Useful collection of Vue composition API functions - vue-condition-watcher -
🕶 Vue Composition API for automatic fetch data when condition has been changed - vue-router-compositions - VueRouter Composition-API utils library
- vue-use-switch-map - 👽 The power of the RxJS switchMap operator injected into the Vue composition world
- vue-use-infinite-scroll -
♾️ A Vue composition function that makes infinite scroll a breeze - vuehooks -
🌟 Collection of utility composition functions for Vue - vue-cookie-next -
🍪 A vue 3 plugin for handling browser cookies with typescript support. - vue-draggable-next - 🧱 A Vue 3 drag-and-drop component based on Sortable.js.
- vue-float-menu - Customizable Floating Menu for Vue 3
- vue-toastification - 🍞 Light, easy, and beautiful Toasts for Vue 2 and 3.
- vue3-scroll-picker - A scroll picker component for Vue 3.
- vue-concurrency -
🚦 A library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API. - 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 - HTML sanitizer for Vue.js 3 apps
- echarts-for-vue - 📊📈ECharts wrapper component for Vue 3 and 2
- headlessui-vue - A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.
- vue3-spring - A spring-physics based animation library, in addition to more components, to cover most of the UI related animations.
- vue3-carousel - Modern lightweight carousel component built for Vue 3.
- vue3-tabs - A swipeable tabs component for vue 3.
- particles.vue3 - A lightweight library for easily create highly customizable particles animations for websites
- vue-final-modal - A renderless, lightweight, feature-rich modal component for Vue 3.
- vueper-slides - A touch ready and responsive slideshow / carousel for Vue and Vue 3.
- splitpanes - A Vue and Vue 3 reliable, simple and touch-ready panes splitter / resizer.
- vue-cal - A Vue and Vue 3 full calendar, no dependency, no BS.
🤘 - wave-ui - An emerging UI framework for Vue.js & Vue 3 with only the bright side.
☀️ - vant - Lightweight Mobile UI Components built on Vue 3
- vue-hooks-form - Building forms with Vue composition API
- vue-visibility - Vue plugin that hides or shows elements depending of a criteria.
👀 - vue-responsive-video-background-player - Play your own videos in background responsively in different resolutions.
- harlem - Simple, unopinionated, lightweight and extensible state management for Vue 3
- vue3-ui - Very clean Vue 3 components styled with love and care to integrate nicely with Bulma CSS.
- vue3-qr-reader - A Vue 3 QR reader component. Refactor vue-qrcode-reader for vue 3 compatibility.
- Equal UI - Vue 3 components library with 30+ components based on TypeScript and Equal design system.
- vue-advanced-cropper - The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design.
- vue-color-kit -
🎨 A Vue 3 color picker component. lightweight, modern, and no dependence.
Examples
- vue-3-playground - Vue 3 Playground packed with all the new features
- vue3-webpack-boilerplate - Vue 3 Webpack Boilerplate (Vue 3, Vue Router 4, Vuex 4, Typescript)
- vue-composition-toolkit -
🔫 Vue3 Composition-API toolkit - vite-tailwind-starter - Starter using Vite + Tailwind for super fast prototyping
- todomvc-vue-composition-api - TodoMVC built with Vue 3 Composition Api and Vuex
- composition-api-demos - A Vue.js app demonstarting various use cases for the new composition API
- Vue3Todo - A repository showcasing the new Vue 3.0 Composition API with simple examples
- movie-search-vue - Movie search app with the Vue 3 Composition API
- vue-next-webpack-preview - Minimal webpack setup for Vue 3 (beta)
- vue-3-reactivity - Code from the Vue 3 Reactivity course
- vue-cart with import-maps - Basic Shopping Cart with Vue ES Module and Composition API (without bundler or build step)
- vue3-realworld-example-app - Realworld implementation using Vue 3 + TypeScript + Composition Api
- vue3-md-blog -
✍️ Minimal config Vue3 + Markdown blog engine - vite-vue3-tailwind-starter - Starter Template based on Vite (Vue 3, Vue Router and Tailwind CSS)
Tools
- aria-vue - Headless testing with Vite + Vue + Vue-Testting-Utils
- vue3-sfc-loader - Load .vue files directly from your html/js. No node.js environment, no (webpack) build step.
Videos
- Evan You - State of the Vuenion 2020
- Alex Kyriakidis - What you'll love in Vue 3
- Evan You - What's Coming in Vue 3
- Vue 3: What I'm Most Excited About with Chris Fritz
- Live coding: The new Composition API - Jason Yu
- Natalia Tepluhina - You might not need Vuex
- Design Principles of Vue 3.0 by Evan You
- Why the Vue 3 Composition API?
- Vue 3 and Composition API by Alex Kyriakidis
- Thorsten Lünborg - Composition API Best Practices
- Damian Dulisz - Vuelidate version for Vue 3.0
- The State of Vue.js in 2020 - Why You Should Make The Leap - Gwendolyn Faraday
- Full-Stack TypeScript with Vue.js 3, Node.js and PostgreSQL
- Vue 3: The Future of Front End
Books
Courses
- The Vue.js 3 Master Class
- What's new in Vue 3
- Vue 3 Essentials
- Vue 3 Deep Dive with Evan You
- Build a Gmail Clone with Vue 3
- Vue 3 Reactivity
- Vue.js: The Composition API
- The Complete Vue.js 3 Crash Course
- From Vue 2 to Vue 3
- Become a Ninja with Vue - online training (EN and FR versions)
- Introduction to Vue 3