538 reads

The Coolest VueJS Resources: Developers' Choice👨‍💻

by Saanvi SenApril 20th, 2021

Too Long; Didn't Read

Check out these Awesome VueJS Resources For Developers

featured image - 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, Vue 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 Gitlab, Alibaba, Xiaomi, Adobe, Euronews, Nintendo, Grammarly, Codeship, Behance, 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.

Bootstrap Vue

BootstrapVue uses Bootstrap 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 WAI-ARIA accessibility markup.

Features:

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

You can also check Vuexy VueJS Admin Template 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

Vuetify is a Vue UI Library with beautifully handcrafted Components using the Material Design 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. **Materio Free VueJS Vuetify Admin Dashboard Template** – 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 community
18 months of Long-term support for Major releases

Quasar

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)

Vuex

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.js

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

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 VueJS UI Component Libraries.

Open Source Projects

PageKit

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

Koel is a simple web-based personal audio streaming service written in Vue on the client-side and Laravel 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

Flox is a self-hosted Movie, Series and Animes watch list. It's built on top of Laravel and Vue.js and uses The Movie Database 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).

Vuegg

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

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.

Retrospectify

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

StackEdit

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

Commercial Projects

Vuexy - VueJS Admin Template(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 100+cards, 50+ Components, 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

Wijmo

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 Angular, React, Vue, 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

VueA Laravel Admin Template

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

Coloban

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

Commandeer

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

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

Collection

20+ Vuejs admin template free download in 2021

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

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 free and premium courses.

Vuemastery

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

Vuelibs

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

Vue Article

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

Vuedose: 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.

Madewithvuejs: 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.

Hackr.io

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.

Vuejsexamples

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.

VueJS Roadmap

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.

Vuejs 2 the complete guide

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

VUE 3 tutorials by Modus Create

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.

Frontendmaster vue 3 course

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!

Vue 3 Tutorial - Full Course 10 Hours 10 apps by Bitfumes

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

The Majesty of Vue.js 2

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.

Fullstack Vue

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

Vue.js: Up and Running

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

Testing Vue.js components with Jest

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

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.

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

Notification

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

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

Loaders

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

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

Icons

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

Menu

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

Charts

Flowchart-vue - Flowchart & Flowchart designer component for Vue.js.
Vue-d3-barchart - Small component to draw charts using d3.
Vue3-highcharts - A Highcharts.JS wrapper component for Vue 3
Echarts-for-vue - ECharts Wrapper Component For Vue 3 and 2
Vue3-chart-v2 - Vue wrapper component base on Chart.JS for Vue 3
vue-apexcharts - Vue.js component for ApexCharts.
vue-doughnut-chart - Doughnut chart component for Vue.js.
v-charts - Chart components based on Vue2.x and Echarts.

Calender

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

Podcasts

Job Portals:

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

Server-side rendering

Universal vue
Factor Platform - An extension-driven VueJS platform (Factor.dev → Docs)
Vapper - A Vue-based server-side rendering framework.

Static website generator

VuePress - Minimalistic Vue-powered static site generator.
Peco - A static website generator for humans.
Saber - A static website generator for building blazing fast websites with Vue.js.
Gridsome - Build super-fast, modern websites with Vue.js
Servue - 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 https://dev.to/theme_selection/ultimate-vuejs-resources-for-developers-3bbk