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. Vue 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 ( ) and npm registry ( ) have crossed React and Angular by a fair margin. ~ 181k stars ~1,925,903 weekly downloads Also, It is used by big companies such as , , , , , , , , , and many more. Gitlab Alibaba Xiaomi Adobe Euronews Nintendo Grammarly Codeship Behance 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 Official Guide API Reference GitHub Repo Release Notes Style Guide Vue.js News UI Libraries and Frameworks A component is a (usually) robust set of ready-made 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. UI library UI Bootstrap Vue 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. BootstrapVue Bootstrap 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. WAI-ARIA 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. Vuexy VueJS Admin Template Vuetify 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. Material Design 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. Materio Free VueJS Vuetify Admin Dashboard Template : Features WCAG (a11y) / WCAG / Section 508 / RTL support Accessibility supported languages 30+ Smaller bundle sizes with tree-shaking automatic A massive Discord community Long-term support for 18 months of 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 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. Vue Laravel Flox 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. The Movie Database 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 , , and many more. 100+cards 50+ Components Features: Based on BootstrapVue Vue 3 Ready (Composition API) Bootstrap 4.5.3 🔥 Laravel 8 🤩 & files added Sketch Figma 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 , , , Ionic, and Web Components Angular React Vue 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. 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. VueJS 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 and courses. free premium 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 (Vue.js 3) 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. latest version of Vue from the ground up 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. - A fancy Materialize CSS datatable VueJS component. Vue Materialize Data table - Vue.js 2 grid components. Vue Tables-2 - The fastest open-source data table for web. Cheetah Grid - A vue.js server-side component to create dynamic tables. vue-datasource - Vue adaptor for ag-Grid. ag-grid-vue - Lightweight and flexible table component for the web ⚡ vue-data-tables vue-teible - Straight Forward Table Component using the vanilla HTML Table Structure. vuejs-smart-table - Vue adaptor for FancyGrid fancy-grid-vue Notification Toaster / snack bar — Notify the user with a modeless temporary little popup - Responsive Touch Compatible Toast plugin for VueJS 2+ Vue Toasted - VueJs Flash Message Component within Vuex Vuex Flash - A Vue UI component for showing notifications. Vue Notification Bell - Vue.js notification bell component. Vue Notification - Yet another Vue.js Toast notification plugin Vue Toast Notification - A fuss free notification component. VueToastify - Vue.js toast notification plugin for Vue 3 vue-toaster Loaders Loaders/spinners/progress bars — Let the user know that something is loading - Radial progress bar component for Vue.js. Vue Radial Progress - Complex Loader Management for Vue/Vuex and Nuxt applications. Vue wait - The Ultimate, fully-customizable Skeleton Card plugin for Vue 🚀 Vue-ultimate-skeleton-cards - A loader manager for Vue.js 3 with reactive method Vue-wait-for - SVG component to create placeholder loading, like Facebook cards loading Vue-content-loader - ⏳ Loading inside a container or full screen for Vue.js - A skeleton screen loading for Vue.js vue-element-loading tb-skeleton - 💫 A collection of loading spinner components for Vuejs vue-spinners Icons - Vue Icon Set Components from Ionic Team. Vue ionicons - Font Awesome component for Vue.js, using inline SVG. Vue awesome - Material Design Icon components for Vuejs Mdi vue - Vue component for the beautiful vue-zondicons svg icons Zondicon - Simply beautiful open source eva icons as Vue components. vue-eva-icons - 1000+ Pixel-perfect svg unicons for your next project as Vue components. v ue-unicons Menu - Vue.js 2 dropdown menu component. Light, easy to use and extend, no external deps. VueJS Dropdown - Simple menu component with a set of basic functionality. Vue simple menu - Vue.js 2 tree navigation with vue-router support Vue tree navigation - Vuejs => 2 dropdown. Easy to use, no external, optional. bp vuejs dropdown - Simple, easily configurable accordion or collapsible styled with Bulma custom or built-in icons available Vue Bulma accordion - Creating a navigation menu with animations like on Stripe Vue-stripe-menu Charts - Flowchart & Flowchart designer component for Vue.js. Flowchart-vue - Small component to draw charts using d3. Vue-d3-barchart - A Highcharts.JS wrapper component for Vue 3 Vue3-highcharts - ECharts Wrapper Component For Vue 3 and 2 Echarts-for-vue - Vue wrapper component base on Chart.JS for Vue 3 Vue3-chart-v2 - Vue.js component for . vue-apexcharts ApexCharts - Doughnut chart component for Vue.js. vue-doughnut-chart - Chart components based on Vue2.x and Echarts. v-charts Calender - Datepicker component for Vue Vue datepicker ui - Most lightweight VueJS Date picker & Date range picker using date-fns and no other dependencies Vue date tools - It's a Vue-based component that provides the functionality of a full-calendar that shows daily events. Vue spring calendar - VueJS light weight wrapper component for Vue jquery calendar jquery ui datepicker - A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement. Vue schedule board - A vue component for lunar calendar. Uses calendar.js for date operations. Vue lunar calendar pro Podcasts DNE 138 - Vale a pena VueJS? (01-05-2018) Cynical Developer #99 (10-15-2018) Syntax #130 (03-27-2019) Enjoy the Vue: The new Vue.js podcast Job Portals: - A Vue.js job portal to hire or get hired for all your Vue.js jobs. Vue.js Jobs - VueJobs - A List of 300 VueJS Interview Questions and Answers Vue.js Interview Questions - A Free Resume Builder for crafting resumes for your dream job. Prokarman Resume Builder Server-side rendering Universal vue - An extension-driven VueJS platform ( ) Factor Platform Factor.dev → Docs - A Vue-based server-side rendering framework. Vapper Static website generator - Minimalistic Vue-powered static site generator. VuePress - A static website generator for humans. Peco - A static website generator for building blazing fast websites with Vue.js. Saber - Build super-fast, modern websites with Vue.js Gridsome - Server-side rendering engine that renders vue files into HTML strings. Servue Communities Twitter Official Forum vueslack - 2300+ registered users worldwide Vue Land - Discord chat server 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

The Coolest VueJS Resources: Developers' Choice👨‍💻

Too Long; Didn't Read

Companies Mentioned

@saanvi-sen

RELATED STORIES