Best Resources For VueJS Developers👨💻
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 (~ 190k stars) and npm registry (~2,691,645 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 that deal with component libraries, examples, projects, tools, and 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
Bootstrap vue 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
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, and Apache Cordova.
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
You can check Materio Vuetify VueJS Admin Template for a better idea. Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. It is the best Vue JS Admin Template.
Furthermore, Materio Vuetify VueJS Admin Template comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as follows.
Features:
- Based on VueJS 3 & Vuetify 3
- Created with Vite 5
- Composition API
- Utilizes Vue Router, Vite, VueUse, Pinia, etc.
- Roles & Permission App
- 5 Dashboards
- 9 Pre-designed Apps
Also, available in the NuxtJS Admin Template Free version
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 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 Apps)
- BEX (Browser Extension)
- Mobile Apps (Android, iOS, …) through Cordova or Capacitor
- Multi-platform Desktop Apps (using Electron)
Vuesax
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 and 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 anime watch list. It’s built on top of Laravel and Vue.js and uses The Movie Database API. The rating is 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)
- A basic set of HTML5 elements
Vue Crud
Vue CRUD allows the creation of 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.
Retrospective
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
Materio — Vuetify VueJS Laravel Admin Template (Latest and The Best💥)
Materio Vuetify VueJS Laravel Admin Template — is the most developer-friendly & highly customizable Admin Dashboard Template based on the popular front-end framework VueJS and back-end Laravel.
If you’re a developer looking for a Vuejs Laravel Admin Template that is developer-friendly, rich with features, and highly customizable look no further than Materio.
Besides, we’ve followed the highest industry standards to bring you one of the very best laravel admin templates. Besides, it is not only fast and easy to use but highly scalable. Furthermore, offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.
In addition, you can build premium-quality single-page applications with ease with the use of this Laravel Dashboard Template built on Vue js. So, use our innovative admin template to create eye-catching, high-quality, and high-performing single-page applications.
Features:
- Pure Vuejs, No jQuery Dependency
- Created with Vue CLI
- Utilizes Vuex, Vue Router, Webpack
- 3 Dashboard, RTL Support
- Code Splitting, Lazy loading
- API-ready JWT Authentication flow
- Access Control (even on CRUD operations)
- Laravel Passport
- Laravel Sanctum and many more
Also, available in the NextJS Dashboard version:
Vuexy — Vuetify VueJS Admin Template (The best)🔥
Vuexy - Vuetify Vuejs Admin Dashboard Template is advanced among all VuetifyVue admin templates. Besides, this template is highly responsive, clean, and well-structured.
Vuetify is a cutting-edge framework that utilizes the latest versions of Vuetify 3 and VueJS. Additionally, it is compatible with React NextJS, HTML Laravel, and Asp.Net.
Furthermore, this graphically enriched bootstrap admin theme is highly recommended by developers all over the world for its user-friendly experience and speed. For instance, you can create SaaS platforms, Project management apps, and many more. Moreover, it has ready-to-use E-commerce pages, CRM systems, Analytics apps, Academics apps, Banking apps, etc.
Also, It is the most developer-friendly Vuejs+HTML dashboard. Which includes 100+ cards, 50+ Components, 10 Apps, and many more.
Features:
- Based on BootstrapVue
- Vue 3 Ready (Composition API)
- Bootstrap 5 🔥
- Laravel 10🤩
- Sketch & Figma files added
- JWT Auth, ACL
- Internationalization/i18n & RTL Ready
Also, check the Materio Bootstrap 5 HTML Admin Template.
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 PivotGrid, PivotChart, and Slicer
- FlexMap (Beta) our newest visualization map control
- Cloropleth Maps
- Scatter Maps
- Bubble Map
VueJS 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 adapt with other libraries or existing projects.
Features:
- Fully based on VueJS
- No jQuery used
- 7 layout 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 IDEs 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, and 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
Laravel Vue Admin Template Free
Well, Laravel+VueJS is the best combination when it comes to delivering responsive web apps and projects. This list includes the best free and premium Laravel Vuejs admin templates to save your precious time. Here you will get to look at some great admin templates built upon the Frontend framework Vue.js and Laravel as a backend 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 an 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, 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, and blogs list that give 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 the 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 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. 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 front-end 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.
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 the 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 the 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.js
- tb-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 the 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.
- vue-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 based on Chart.JS for Vue 3
- Vue-apex-charts — Vue.js component for ApexCharts.
- Vue-doughnut-chart — Doughnut chart component for Vue.js.
- v-charts — Chart components based on Vue2.x and Echarts.
Calendar
- 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 lightweight wrapper component for jQuery UI date picker
- Vue schedule board — An easy-to-use component to show somebody’s schedule list to help with interview arrangements or visit arrangements.
- Vue lunar calendar pro — A vue component for the lunar calendar. Uses calendar.js for date operations.
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. UNMAINTAINED
- 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.
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. You can check the VueJS Admin Templates for your next project.
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.🙂
Originally published at https://dev.to on April 7, 2021.
