The Coolest VueJS Resources: Developers' Choice👨‍💻

As we all know, Vue is one of the best JavaScript frameworks. It is highly recommended by developers across the globe. Here we are going to list down some of the amazing resources for VueJS. Although, before we start the list let's have an overview of VueJS.

What is VueJS?

Well,  is a progressive framework for building user interfaces. It is designed from the ground, and can easily be a library and a framework depending on your goals. It consists of a core library that focuses on the view layer and an ecosystem of supporting libraries. Vue was created by Evan You. He created Vue as a progressive JavaScript framework and a performant alternative to Angular.

Unlike Angular and React, VueJS is not backed by tech giants like Facebook and Google. Yet, VueJS has emerged as the favorite js framework due to its amazing features and advantages. Recently, its GitHub (~ 181k stars) and npm registry (~1,925,903 weekly downloads) have crossed React and Angular by a fair margin.

Also, It is used by big companies such as , , , , , , , , , and many more.Now, let's begin.

Resources

Following are some of the useful VueJS resources which deal with component libraries, examples, projects, tools, articles regarding VueJS.

Official Resources

UI Libraries and Frameworks

A UI component library is a (usually) robust set of ready-made UI components such as buttons, inputs, dialogs, and so on. They serve as building blocks for layouts. Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects.

 uses  components with Vue. It helps you to build responsive, mobile-first projects. It is a combination of Vue.js and the world’s most popular front-end CSS library, Bootstrap. BootstrapVue brings the power of Bootstrap to Vue. It makes all Bootstrap elements, such as rows, columns, and cards, available as Vue components.Besides, it provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated  accessibility markup.

Features:

• Easily themable
• ARIA Accessibility out of the box
• Active development
• Not tied to jQuery

You can also check  for a better idea. It is based on bootstrap Vue. Besides, it is a very responsive, highly customizable, advanced, and most loved multipurpose admin template by our customers.

Vuetify is a Vue UI Library with beautifully handcrafted Components using the  specification. It consists of UI guidelines for shapes, cards, interactions, depth effects such as shadows and lights, and more.It helps you fasten your development process with all of the tools that you need to succeed. In addition, it supports all modern browsers and is compatible with Vue CLI-3. It also offers basic templates for Simple HTML, Webpack, NUXT, PWA, Electron, A La Carte, Apache Cordova.You can check Materio Vuetify VueJS Admin Template for instance. **** – is the latest developer-friendly 🤘🏻 & highly customizable✨ Admin Dashboard Template based on Vuetify for developers.

Features:

• WCAG Accessibility (a11y) / WCAG / Section 508 / RTL support
• 30+ supported languages
• Smaller bundle sizes with automatic tree-shaking
• A massive Discord 
• 18 months of Long-term support for 

Quasar is a high-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron), and Browser extensions. This allows you as a web developer to quickly create responsive websites/apps in many flavors. It is focused on the following Material 2.0.Quasar offers a UMD (Unified Module Definition) version, which you add as a CSS and JS HTML tags into an existing project and you’re ready to use it.

Features:

• Performance-focused framework
• Provides built-in SSR (Server-side Rendered App) support
• PWAs (Progressive Web App)
• BEX (Browser Extension)
• Mobile Apps (Android, iOS, …) through Cordova or Capacitor
• Multi-platform Desktop Apps (using Electron)

Vuesax is a framework of components based on Vue js, it is a framework that is designed from scratch to be incrementally adoptable. It offers unique and reusable UI components. This framework is focused on facilitating the development of applications, improving the design of the same without removing the necessary functionality. Besides, all the components have unique colors, shapes, and designs so that you can use them freely without losing the speed of creation and production.

Features:

• Unique and beautiful design
• Fresh design compare to well known Material Design
• Reusable Components and easy to implement
• Responsive support

Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router, and vuex) and powerful development tools (webpack, Babel, and PostCSS)

Features

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server-side rendering OR Single Page App OR Static Generated, you choose 🔥

Ream is a framework for building server-rendered or statically-generated web apps in Vue 3, it's heavily inspired by Next.js and Svelte Kit

For a complete list Visit .

Open Source Projects

Modular and lightweight CMS built with Symfony components and Vue.js. No matter, if it’s a personal blog or your company’s website. With Pagekit you can create powerful content for the web that works perfectly on every device. Pagekit's clean and intuitive interface allows you to focus on what matters most, managing your content.

Koel is a simple web-based personal audio streaming service written in  on the client-side and  on the server-side. Targeting web developers, Koel embraces some of the more modern web technologies – CSS grid, audio, and drag-and-drop API to name a few – to do its job.

Flox is a self-hosted Movie, Series and Animes watch list. It's built on top of Laravel and Vue.js and uses  API. The rating based on a 3-Point system for good, medium, and bad.

Features

• API for Plex- Sync movies, shows, and watched episodes from Plex to Flox.
• Episode Tracking.
• Suggestions.
• Watchlist.
• Popular Movies and Shows, Upcoming and Current Movies (updated daily).

Scaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work, and helps to achieve a rapid-prototyping workflow.The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.

Features:

• Mockup/prototype by drag-drop components and move/resize them
• Support for standard Mouse and Keyboard combinations
• Responsive preview (phone, tablet, web)
• Basic set of HTML5 elements

Vue CRUD allows creating both a mechanism for managing a single table, as well as a CMS or extended CRM with a login system and modules. Vue CRUD uses the vue along with its ecosystem (Vuex, Vuetify, etc). Enjoy the benefits of the most popular JS framework in the world.

An awesome tool for doing agile team retrospectives digitally. This can be useful when doing retrospectives with remote teams or when you want to keep track of retrospective outcomes over time.

Features

• Three types of notes
• Moving around/prioritizing notes to your team's needs
• Adding points to individual notes

Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

Commercial Projects

(The best)🔥

Vuexy -Vuejs Admin Dashboard Template is advanced among all bootstrap Vue admin templates. Besides, this template is highly responsive, clean, and well structured. Vuexy bootstrap vue admin template is laced with Vuejs, HTML (bootstrap 4), PHP (laravel 8) and React (reactstrap), Angular 11. Furthermore, this graphically enriched bootstrap template is highly recommended by developers over the world for its user-friendly experience and speed. Also, It is the most developer-friendly Vuejs+HTML dashboard. Which includes , , and many more.

Features:

• Based on BootstrapVue
• Vue 3 Ready (Composition API)
• Bootstrap 4.5.3 🔥
• Laravel 8 🤩
• Sketch & Figma files added
• JWT Auth, ACLInternationalization/i18n & RTL Ready

Wjimo has 100+ Dynamic JavaScript UI Components for Enterprise Apps. With help of Wjimo you can cut development time in half. Also, you can build lightweight, high-performance HTML/JavaScript UI applications fast.

• FlexGrid offers virtualized rendering and limitless cell templates
• Deep integration with all JavaScript frameworks, including ,  ,  , Ionic, and Web Components
• Visualize data with 80+ chart types
• Analyze data with OLAP Pivot
• Grid, PivotChart, and Slicer​
• FlexMap (Beta) our newest visualization map control
• Cloropleth MapsScatter Maps
• Bubble Map

This admin template is built with Vuejs2, Laravel 5.4, and Bootstrap 4. VueJS is designed for developing any project from scratch and can also be integrated with any other developed project. The core library of vue is mainly associated with the presentation layer and it is very easy to adopt with other libraries or existing projects.

Features:

• Fully based on VueJS
• No jQuery used
• 7 layouts options provided
• Multiple breadcrumb designs
• Multiple color schemes added

All-in-one project management tool with chats, Kanban, Gantt, calls, screen share, and many more.

It is one of the best developer IDE to manage your serverless and container infrastructures, locally and in the cloud. With support for 30+ of the best cloud services out there. With over 10 deploy and test runners, you can configure once, and repeat over and over. Configure your Ansible and Serverless environment variables. Invoke lambdas directly or test S3, SQS, SNS, DynamoDB Stream Lambda invocations with our test runners.It helps you to:

• Visualize Your System
• Increase Your Team Velocity
• Faster Ramp-up Time
• Boost Productivity

Moonitor gives you a clear overview of your cryptocurrency assets in real-time.

Collection

Well, as the majority of popular brands trust their web applications with Vue. Hence, it can be a good choice for you to utilize it for your business. In that case, you must pick the most appropriate and free VueJS admin template for your next projects.So, this list includes the best free and premium Vuejs admin templates to save your precious time. Here you will get to look at some great admin templates build upon the Vue.js framework.

Vueschool is a great source of tutorials, short lessons, and courses to Learn Vue.js and modern, cutting-edge front-end technologies. It offers both  and  courses.

Vuemastery offers a large number of courses and tutorials. They also provide useful articles and blogs on VueJS. It is one of the most preferred Vuejs resources. To be the ultimate learning resource for Vue Developers. Vuemastery does this by:

• Creating weekly tutorials in video and article format.
• Co-producing the Official Vue.js News.
• Producing exclusive content for our subscribers.
• 25% of your monthly payment goes to the Vue Project

Vuelib is a list of Vue.js libraries, frameworks, Utilities and components.

Here you'll find detailed articles on vue 2 and vue 3. It also offers tutorials with examples.

: Learn Vue, dose by dose.

Here is the amazing collection of articles related to VueJS. This VueJS resource contains very detailed and noteworthy articles and tutorials. You can subscribe to receive all the articles in the mail.

: A collection of projects made with Vue.js

Made with Vuejs is a rich collection of websites, admin templates, apps, utilities, UI components, libraries, etc; which are made with VueJS. You'll also get books, plugins, charts, etc.

This is the list of best Vue.js tutorials and courses recommended by the programming community. Here you can pick the best courses and tutorials to learn VueJS in depth.

VueJS examples, as the name suggests, it is a collection of examples like A simple and customizable step progress indicator, Vue Auto Loan Calculator, Notification/Toast Component, etc projects made with VueJS. Not only this, but it also offers components UI, games, elements, media, and many more which are made with VueJS.

Tutorials/Courses/Blogs

Here are the tutorials, courses, blogs list that gives a brief overview of VueJS.

New to VueJS? Well, put your worries aside and check out this roadmap for Vuejs developers. Here you’ll get a step-by-step procedure to become a VueJs Developer. This roadmap for VueJS developer will give you an idea about the landscape and guide you if you are confused about where to begin or what to learn next.

This bestselling course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

You'll learn in this Course:

• What is VueJS and Why would you use it?
• The Basics (including the basic Syntax, Understanding Templates, and much more!)
• How to Output Reactive Data & Listen to Events
• Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)
• Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones.
• Understand the Theory behind Vue.js and use it in Real Projects
• Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)
• Learn the latest version of Vue (Vue 3), including the brand-new Composition API

 by 

Here is the collection of 11 video tutorials for Vue 3. This Tutorial set deals with the basics of Vue 3 in a very easy way. If you are a beginner and want to learn Vue 3 then this tutorial set is for you.

With this course, you’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API!

 by 

Vue js tutorial full course for beginners to advanced. Building 10 projects in 10 hours Using Vue 3 composition API - setup, teleport, reactivity, and ref Vue 3 Tutorial will start from very basics and teach you how to use TensorFlow and firebase with your Vuejs in this full course of 10 hours by building 10 different apps.

Books

If you want to learn Vue.js 2 from scratch then this book will guide you through the path of the rapidly spreading JavaScript Framework Vue.js. By the end of this book, you will be able to create fast front-end applications and increase the performance of your existing projects with Vue.js 2 integration.

The Fullstack Vue book is the complete guide to Vue.js. With dozens of code examples showing every step, you will master this delightful framework

Get a brisk introduction to building fast, interactive single-page web applications with Vue.js, the popular JavaScript framework that organizes and simplifies web development. With this practical guide, you’ll quickly move from basics to custom components and advanced features—including JSX, the JavaScript syntax extension.If you’re a frontend developer familiar with JavaScript, HTML, and CSS, this book will show you how to develop a fully-featured web application using Vue. By going through this book you will be able to,

• Learn Vue.js basics, including its use of templates to display data on a page
• Set up Vue projects from scratch, or use Vue-CLI to set up from a template
• Create a maintainable codebase by splitting code into self-contained components

A concise and practical guide to unit tests your Vue.js components using Jest, the fully-featured JavaScript testing framework. Learn shallow rendering, snapshot testing, and dependency mocking, among other techniques. This book shows you by practicing how to test easily Vue.js components and take advantage of the fully-featured Jest testing framework.It will guide you through testing styles and structure as well as testing behaviors of your Vue.js components. You'll see how to apply techniques such as snapshot testing, shallow rendering, module dependency mocking, and module aliasing to make smoother and cleaner tests.

Vue.js in Action is your guide to building modern web apps. You’ll start by exploring the reactive UI model while you get comfortable with Vue’s unique features.Then, you’ll go deeper as you build a shopping cart with an admin interface and the ability to manage stock! Finally, you’ll extend your app, adding transitions, tests, and other key features until it’s production-ready

UI Components:

Components are a great way to design and develop your UI using smaller, reusable pieces with better consistency. Components provide better collaboration between design and development, allowing your design language to evolve over time.

Tables

Following are some of the table components and ag-grid components for Vue.

•  - A fancy Materialize CSS datatable VueJS component.
•  - Vue.js 2 grid components.
•  - The fastest open-source data table for web.
•  - A vue.js server-side component to create dynamic tables.
•  - Vue adaptor for ag-Grid.
•  - Lightweight and flexible table component for the web ⚡
•  - Straight Forward Table Component using the vanilla HTML Table Structure.
•  - Vue adaptor for FancyGrid

Notification

Toaster / snack bar — Notify the user with a modeless temporary little popup

•  - Responsive Touch Compatible Toast plugin for VueJS 2+
•  - VueJs Flash Message Component within Vuex
•  - A Vue UI component for showing notifications.
•  - Vue.js notification bell component.
•  - Yet another Vue.js Toast notification plugin
•  - A fuss free notification component.
•  - Vue.js toast notification plugin for Vue 3

Loaders

Loaders/spinners/progress bars — Let the user know that something is loading

•  - Radial progress bar component for Vue.js.
•  - Complex Loader Management for Vue/Vuex and Nuxt applications.
•  - The Ultimate, fully-customizable Skeleton Card plugin for Vue 🚀
•  - A loader manager for Vue.js 3 with reactive method
•  - SVG component to create placeholder loading, like Facebook cards loading
•  - ⏳ Loading inside a container or full screen for Vue.js - A skeleton screen loading for Vue.js
•  - 💫 A collection of loading spinner components for Vuejs

Icons

•  - Vue Icon Set Components from Ionic Team.
•  - Font Awesome component for Vue.js, using inline SVG.
•  - Material Design Icon components for Vuejs
•  - Vue component for the beautiful 
•  svg icons
•  - Simply beautiful open source eva icons as Vue components.
•  - 1000+ Pixel-perfect svg unicons for your next project as Vue components.

Menu

•  - Vue.js 2 dropdown menu component. Light, easy to use and extend, no external deps.
•  - Simple menu component with a set of basic functionality.
•  - Vue.js 2 tree navigation with vue-router support
•  - Vuejs => 2 dropdown. Easy to use, no external, optional.
•  - Simple, easily configurable accordion or collapsible styled with Bulma custom or built-in icons available
•  - Creating a navigation menu with animations like on Stripe

Charts

•  - Flowchart & Flowchart designer component for Vue.js.
•  - Small component to draw charts using d3.
•  - A Highcharts.JS wrapper component for Vue 3
•  - ECharts Wrapper Component For Vue 3 and 2
•  - Vue wrapper component base on Chart.JS for Vue 3
•  - Vue.js component for .
•  - Doughnut chart component for Vue.js.
•  - Chart components based on Vue2.x and Echarts.

Calender

•  - Datepicker component for Vue
•  - Most lightweight VueJS Date picker & Date range picker using date-fns and no other dependencies
•  - It's a Vue-based component that provides the functionality of a full-calendar that shows daily events.
•  - VueJS light weight wrapper component for 
•  - A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement.
•  - A vue component for lunar calendar. Uses calendar.js for date operations.

Podcasts

Job Portals:

•  - A Vue.js job portal to hire or get hired for all your Vue.js jobs.
•  - A List of 300 VueJS Interview Questions and Answers
•  - A Free Resume Builder for crafting resumes for your dream job.

Server-side rendering

•  - An extension-driven VueJS platform ()
•  - A Vue-based server-side rendering framework.

Static website generator

•  - Minimalistic Vue-powered static site generator.
•  - A static website generator for humans.
•  - A static website generator for building blazing fast websites with Vue.js.
•  - Build super-fast, modern websites with Vue.js
•  - Server-side rendering engine that renders vue files into HTML strings.

Communities

Conclusion:

Here we have mentioned some of the very useful VueJS resources. While you are working with the VueJS project you'll surely need some tools, UI component libraries, admin templates, video tutorials, etc. So, to help you save your time we have gathered some amazing resources here so that you don't have to search here and there.We are open to suggestions so do tell us which other resources can be included in the list. Also, don't forget to share and bookmark this collection.We hope you find this collection useful.🙂

Also published at