--- title: Best Vue.js posts of 2022 | daily.dev description: The most upvoted Vue.js posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/vuejs/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/vuejs/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best Vue.js posts of 2022 | daily.dev og:description: The most upvoted Vue.js posts of 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Vue.js — 2022 1. 1 [](/posts/2021-javascript-rising-stars-mjdeqmzfa "2021 JavaScript Rising Stars") Article Pointer · 5y 2021 JavaScript Rising Stars Zx is a new tool by Google to write simple Command Line scripts in JavaScript or TypeScript. Vite is a building tool that uses esbuild compiler to provide great performance. Next.js keeps its position of leading "meta framework" for the React world. Tauri is a solution to build desktop applications using web technologies. 242 15 2. 2 [](/posts/never-stop-learning-mqg3stlel "Never stop learning") Article Hashnode · 5y Never stop learning There is always something to learn, something that changed, or something you could improve on. Good developers have a knack for learning, absorbing, and mastering things. There are no shortcuts to learning, so take small steps. documenting your journey can help you see how much you've grown. 239 32 3. 3 [](/posts/6-best-frontend-communities-to-join-in-2022-urmc4r-yi "6 Best Frontend Communities to Join in 2022") Article Honeypot · 4y 6 Best Frontend Communities to Join in 2022 In 2022, there are lots of online developer communities that can scale your learning experience and speed. WeLearnJS is a slack community of JavaScript developers with more than 12,000 members as of June 2022\. Reactiflux is an online Discord community of React developers with a massive size of more than 185,000. 191 24 4. 4 [](/posts/vite-4-0-is-out--as9udfgh4 "Vite 4.0 is out!") Article Community Picks · 4y Vite 4.0 is out! Vite 4.0 is out! Vite 3 was released five months ago. Vite is now using Rollup 3, which allowed us to simplify Vite's internal asset handling. 128 9 5. 5 [](/posts/pinia-the-new-and-better-state-management-system-for-vue-slzgjrsbu "Pinia, The New (and better) State Management System For Vue") Article Vue.js Developers · 4y Pinia, The New (and better) State Management System For Vue Pinia is the new State Management System for Vue. This article explains why I think it’s a great tool, and why you should be using it today. If you haven’t heard about Pinia yet or considering switching from Vuex, this article might help you. 119 4 6. 6 [](/posts/micro-frontend-why-and-how--go9ueweum "Micro-Frontend—Why and How?") Article Syncfusion · 4y Micro-Frontend—Why and How? Micro-frontend is a new architecture inspired by microservices. The concept is similar to microservices, where we can break the whole monolithic codebase into smaller codebases that can be developed autonomously by distributed teams. Micro-frontends have certain principles that allow for scaling an app. 109 1 7. 7 [](/posts/the-6-best-javascript-frameworks-to-use-in-2022-r1-fbhei1 "The 6 Best JavaScript Frameworks to Use in 2022") Article SNIPCART · 5y The 6 Best JavaScript Frameworks to Use in 2022 JavaScript frameworks are tried and tested tools for building scalable web applications. They contain a collection of JavaScript code libraries that provide pre-written JS code for standard programming features and tasks. Frameworks enable you to add functionalities like testing and linting to ensure you're shipping error-free code. There are more than 20 frameworks and 80 libraries for developers to choose from. 104 1 8. 8 [](/posts/vite-is-now-the-default-frontend-asset-bundler-for-laravel-applications-qlwpwcy8 "Vite is now the default frontend asset bundler for Laravel applications") Article Laravel News · 4y Vite is now the default frontend asset bundler for Laravel applications Vite is now the default frontend asset bundler in new Laravel projects. Breeze and Jetstream have been updated as well. Vite provides near-instantaneous build times during development. You'll see updates automatically happen in the browser while you work, which is a fantastic experience! 77 9. 9 [](/posts/vue-3-was-a-mistake-that-we-should-not-repeat-hkgah-7yd "Vue 3 was a mistake that we should not repeat") Article Vue.js Developers · 4y Vue 3 was a mistake that we should not repeat More than 4 years have passed since the initial introduction of Vue 3\. Many discussions over several RFCs and a lot of influence from other modern frameworks including React and Svelte have shaped Vue. Vue is probably the most powerful and well-rounded framework out there, capable of supporting applications of any scale and architecture. 61 4 10. 10 [](/posts/heroicons-2-0-are-here-7e-ydsbtq "Heroicons 2.0 are here") Article Laravel News · 4y Heroicons 2.0 are here The makers of Tailwind CSS released Heroicons 2.0, a set of 264 hand-crafted SVG icons for the web. The icons are redrawn from scratch and feature a 24px solid set. They are available as first-party React and Vue libraries and official Figma components. 61 11. 11 [](/posts/circum-icons---coherent-open-source-icon-library-for-designers-developers-eshr-lwfc "Circum Icons - Coherent open-source icon library for designers & developers") Article Product Hunt · 4y Circum Icons - Coherent open-source icon library for designers & developers These open-source icons are perfect for modern frameworks like React, Vue and Svelte. There are 285 icons currently available and a growing library of icons. Whether you're a designer or a developer, we've covered you with features. 57 3 12. 12 [](/posts/getting-started-with-vite-gxrhmn1of "Getting started with Vite") Article asayer · 4y Getting started with Vite Vite serves your code via native ES module imports during development and bundles it with Rollup for production. Vite is a lightning-fast cold server start and offers instant hot module replacement and true on-demand compilation. It is also highly extensible via its plugin API and JavaScript API with full typing support. 56 3 13. 13 [](/posts/vue-creator-tells-react-team-you-should-recommend-vite-over-create-react-app-for-react-developers-cdlaaimfm "Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers") Article gitconnected · 4y Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects, such as VanillaJS, Vue, React, and Svelte. 55 2 14. 14 [](/posts/game-of-codes---fantasy-maps---if-react-vue-angular-bootstrap-or-tailwind-were-countries-ilmdhgsgf "Game Of Codes - fantasy maps - If React, Vue, Angular, Bootstrap or Tailwind were Countries") Article Product Hunt · 5y Game Of Codes - fantasy maps - If React, Vue, Angular, Bootstrap or Tailwind were Countries Using real data, such as NPM downloads, stars on GitHub, or website traffic, I visualized technologies as countries. The methodology is described in detail for two separate maps for: Front-end Frameworks and CSS libraries. Backend & more are COMING SOON! 55 3 15. 15 [](/posts/how-i-built-a-vue-js-ecommerce-store-with-a-node-js-backend-9kpggkgko "How I Built a Vue.js Ecommerce Store with a Node.js Backend") Article Community Picks · 4y How I Built a Vue.js Ecommerce Store with a Node.js Backend Vue.js has been rising in popularity since it was first released due to its many advantages. It can be used to build a variety of apps, including websites, mobile apps, or desktop apps. For the backend, you’ll learn how to use Medusa, an open source Node.js commerce engine. 53 6 16. 16 [](/posts/modern-web-animations-with-gsap-and-vue-3-trh2s-0yf "Modern web animations with Gsap and Vue 3") Article asayer · 5y Modern web animations with Gsap and Vue 3 Learn how to create beautiful animations that really bring your websites to life. We’ll be using the powerful .css-1mn6awi. gsap animation library to animate our Vue 3 application using JavaScript. By the end, you will know how to set up a modern web application and create slick animations. 51 1 17. 17 [](/posts/builderio-qwik-the-html-first-framework-instant-apps-of-any-size-with-1kb-js-jyvy-3mcw "BuilderIO/qwik: The HTML-first framework. Instant apps of any size with ~ 1kb JS") Article Pointer · 4y BuilderIO/qwik: The HTML-first framework. Instant apps of any size with \~ 1kb JS Qwik allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off. As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading is what makes Qwik so quick. 48 2 18. 18 [](/posts/vueuse---the-library-that-makes-vue-3-worth-the-upgrade-p08wb0ddg "VueUse - The library that makes Vue 3 worth the upgrade") Article Vue.js Developers · 4y VueUse - The library that makes Vue 3 worth the upgrade VueUse is a collection of 200+ essential utility functions for interacting with various APIs like browser, state, network, animation, time and more. The core package aims to be lightweight and dependence free. Integration with popular packages is supported using add-ons. 48 19. 19 [](/posts/next-js-vs-nuxt-js-ultimate-guide-ky1cve4uo "Next.js vs. Nuxt.js: Ultimate guide") Article LogRocket · 4y Next.js vs. Nuxt.js: Ultimate guide Next.js and Nuxt.js are modern JavaScript frameworks used to build modern web applications. Both are static site generators that embrace Jamstack architecture and are used on top of React and Vue, respectively. Next.js offers client-side and server-side rendering features and is used to develop fullstack React applications. 46 1 20. 20 [](/posts/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses-59vh1un95 "Next.js vs NuxtJS: a comparison of two powerhouses") Article asayer · 4y Next.js vs NuxtJS: a comparison of two powerhouses New features in NuxtJS 3’s public beta, released in October, gave developers more time to focus on creating wonderful user experiences. Nuxt JS offers a module system that enables the core to be expanded. If there is an existing NuxJS module, you don’t need to create it all from scratch or maintain boilerplate. Plugins and configuration settings can be added. In addition to hybrid rendering permits various caching rules per route. If you share an article on Facebook, it can appear with the title “undefined” rather than the original article’SEOs. 46 2 21. 21 [](/posts/formkit-auto-animate-a-zero-config-drop-in-animation-utility-that-adds-smooth-transitions-to-your--wuq8h5yy2 "formkit/auto-animate: A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.") Article Changelog · 4y formkit/auto-animate: A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application. Add motion to your apps with a single line of code. Please consider supporting us with a recurring or one-time donation. 45 1 22. 22 [](/posts/20-useful-vue-js-components-2022-gcul5mem4 "20+ Useful Vue JS Components 2022") Article Vue.js Developers · 5y 20+ Useful Vue JS Components 2022 20+ Useful Vue JS Components 2022 ThemeSelection. VueJS is a progressive framework for building user interfaces. It is used by big companies such as Gitlab, Alibaba, Xiaomi, Adobe, Euronews, Nintendo, Grammarly, Codeship, Behance, and many more. 44 3 23. 23 [](/posts/10-best-webstorm-themes-x166diywk "10 Best WebStorm Themes") Article JetBrains · 4y 10 Best WebStorm Themes All the themes mentioned in this blog post are either available out of the box or can be installed for free directly from your IDE. WebStorm is very customizable, so you can configure it how you like. You can change the theme you’re using, which will alter the look and feel of the IDE. 43 6 24. 24 [](/posts/vue-vs-react-in-2022-what-to-choose-and-when-eviqbbhjt "Vue vs React in 2022: What to Choose and When") Article Dev Genius · 4y Vue vs React in 2022: What to Choose and When Vue and React are among the most fast-evolving technologies for frontend development. There are many factors to explain their popularity among business owners and developers. In this blog, we will try to compare Vue.js vs React.js, taking into account their differences and similarities. 42 4 25. 25 [](/posts/opnform-is-an-open-source-form-builder-made-with-laravel--sbnhjljc "OpnForm is an Open-source Form Builder Made With Laravel") Article Laravel News · 4y OpnForm is an Open-source Form Builder Made With Laravel OpnForm is an open-source form builder made with Laravel, Vue.js, Tailwind CSS, and more. You can self-host this application or use the cloud-based hosted version to create forms that you can share anywhere on the web. 41 2 [See all Vue.js archives](/tags/vuejs/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/vuejs/best-of/2022#page","url":"https://daily.dev/tags/vuejs/best-of/2022","name":"Best Vue.js Posts of 2022","description":"The most upvoted Vue.js posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/vuejs/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/2021-javascript-rising-stars-mjdeqmzfa","name":"2021 JavaScript Rising Stars"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/never-stop-learning-mqg3stlel","name":"Never stop learning"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/6-best-frontend-communities-to-join-in-2022-urmc4r-yi","name":"6 Best Frontend Communities to Join in 2022"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/vite-4-0-is-out--as9udfgh4","name":"Vite 4.0 is out!"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/pinia-the-new-and-better-state-management-system-for-vue-slzgjrsbu","name":"Pinia, The New (and better) State Management System For Vue"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/micro-frontend-why-and-how--go9ueweum","name":"Micro-Frontend—Why and How?"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/the-6-best-javascript-frameworks-to-use-in-2022-r1-fbhei1","name":"The 6 Best JavaScript Frameworks to Use in 2022"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/vite-is-now-the-default-frontend-asset-bundler-for-laravel-applications-qlwpwcy8","name":"Vite is now the default frontend asset bundler for Laravel applications"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/vue-3-was-a-mistake-that-we-should-not-repeat-hkgah-7yd","name":"Vue 3 was a mistake that we should not repeat"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/heroicons-2-0-are-here-7e-ydsbtq","name":"Heroicons 2.0 are here"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/circum-icons---coherent-open-source-icon-library-for-designers-developers-eshr-lwfc","name":"Circum Icons - Coherent open-source icon library for designers & developers"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/getting-started-with-vite-gxrhmn1of","name":"Getting started with Vite"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/vue-creator-tells-react-team-you-should-recommend-vite-over-create-react-app-for-react-developers-cdlaaimfm","name":"Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/game-of-codes---fantasy-maps---if-react-vue-angular-bootstrap-or-tailwind-were-countries-ilmdhgsgf","name":"Game Of Codes - fantasy maps - If React, Vue, Angular, Bootstrap or Tailwind were Countries"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-i-built-a-vue-js-ecommerce-store-with-a-node-js-backend-9kpggkgko","name":"How I Built a Vue.js Ecommerce Store with a Node.js Backend"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/modern-web-animations-with-gsap-and-vue-3-trh2s-0yf","name":"Modern web animations with Gsap and Vue 3"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/builderio-qwik-the-html-first-framework-instant-apps-of-any-size-with-1kb-js-jyvy-3mcw","name":"BuilderIO/qwik: The HTML-first framework. Instant apps of any size with ~ 1kb JS"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/vueuse---the-library-that-makes-vue-3-worth-the-upgrade-p08wb0ddg","name":"VueUse - The library that makes Vue 3 worth the upgrade"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/next-js-vs-nuxt-js-ultimate-guide-ky1cve4uo","name":"Next.js vs. Nuxt.js: Ultimate guide"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/next-js-vs-nuxtjs-a-comparison-of-two-powerhouses-59vh1un95","name":"Next.js vs NuxtJS: a comparison of two powerhouses"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/formkit-auto-animate-a-zero-config-drop-in-animation-utility-that-adds-smooth-transitions-to-your--wuq8h5yy2","name":"formkit/auto-animate: A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application."},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/20-useful-vue-js-components-2022-gcul5mem4","name":"20+ Useful Vue JS Components 2022"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/10-best-webstorm-themes-x166diywk","name":"10 Best WebStorm Themes"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/vue-vs-react-in-2022-what-to-choose-and-when-eviqbbhjt","name":"Vue vs React in 2022: What to Choose and When"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/opnform-is-an-open-source-form-builder-made-with-laravel--sbnhjljc","name":"OpnForm is an Open-source Form Builder Made With Laravel"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Vue.js","item":"https://daily.dev/tags/vuejs"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/vuejs/best-of"},{"@type":"ListItem","position":5,"name":"2022"}]}]} ```