Vue.JS Learning Resources

Vue JS Learning Resources

In the time of information overload and rapid technological advancement, it is really hard to follow and try out all the interesting projects, articles and samples. I have compiled a list of resources for the Vue JS framework that I am interested in reviewing and sharing. I will split resources by topics.

# Sample projects

Resource 5
Build a live commenting system with Laravel and Vue.js
"This tutorial will help you build a realtime commenting system with Laravel, Vue.js and Pusher. We’ll create a basic landing page, a comments feed, and a submission form where users can submit comments that will be added to the page and viewable instantly. This tutorial is the Laravel version of this one, and when setting up Vuex and Vue.js you can refer to the same sections in that tutorial."
Resource 5
Build a Location-based Chatroom with Firebase and Vue.js
"Recently, me and my friend built a location-based chatroom called — Near. People can talk with each other nearby in a web app. We would like to share what we did and how to make it. Please feel free to give us feedback by replying this article."
Resource 5
Building a Pomodoro Timer with Vue.js
"Building a Pomodoro Timer with Vue.js. How I learned a lot trying to make a timer for a challenge and then determined to make a full featured one."
Resource 5
Build a Secure To-Do App with Vue, ASP.NET Core, and Okta
"I love lists. I keep everything I need to do (too many things, usually) in a big to-do list, and the list helps keep me sane throughout the day. It’s like having a second brain!"
Resource 5
How To Create a Real Time To Do List App with Vue, Vuex & Firebase Tutorial
"Hello! In this tutorial, we’ll be using Firebase and Vue to create a very simple project that will update your Firestore and your VueJS project in real time. We’re going to be creating a simple to do list before we get started – you need to have NodeJS & NPM installed."
Resource 5
How to Drag and Drop File Uploads with Vue.js and Axios
"In this tutorial we are going to combine all of these tricks to make the ultimate file uploader with VueJS and Axios. We will allow users to select any amount of files, remove the ones they don’t, show a preview, and show a status bar for uploading the files."



# Authentication in Vue.js

Resource 5
How to structure a Vue project  Authentication
"We will build a simple project that handles authentication and prepare basic scaffolding to use when building the rest of the app."
Resource 5
User Authentication with Vue.js, ASP.NET Core 2 and Facebook Login
"How to setup JWT authentication with ASP.NET Core 2, Vue.Js, and Facebook OAuth."
Resource 5
Google OAuth2 with VueJS and Vert.x
"Create a simple VueJS frontend app running on a Vert.x backend, providing login with Google OAuth2 from scratch"
Resource 5
Managing User Permissions in a VueJS App
"In authenticated frontend apps, we often want to change what's visible to the user depending on their assigned role. For example, a guest user might be able to see a post, but only a registered user or an admin sees a button to edit that post."
Resource 5
User Registration and Login with Vue.js and Vuex
"In this tutorial we'll go through an example of how to build a simple user registration and login system using Vue.js and Vuex + Webpack 4.16"



# Vue.JS Best Practices and Tips

Resource 5
Common mistakes to avoid while working with Vue.js
"In this article, I’d like to share a few common issues that you may have to deal with when working with Vue.js."
Resource 5
Managing Vue state in Vue.js applications with Vuex
"As you write applications with Vue and take advantage of its support for components, you will need to decide how to manage the state of your application..."
Resource 5
Accessing the virtual DOM using render functions in Vue JS
"In this post, we will look at how to use render functions to unleash the power of JavaScript by using templates in Vue."
Resource 5
Working with Dynamic Components in Vue.js
"To understand what is a dynamic component, let's consider an example. Suppose we are developing a commenting platform where user can come and post a comment on the article. Posting of comment for the logged-in and logged-out user is different..."
Resource 5
How to avoid SOLID principles violations in Vue. JS application
"In this article I’d like to discuss how can we avoid SOLID principles violation in our Vue.JS project."
Resource 5
Vue.js Series
"Welcome to the Vue.js Series. In this blog series, we are going to go through a detailed example of how to use Vue.js to create a fully functional client application that consumes the .NET Core 2.0 Web API server."
Resource 5
Vue.js Series – Two-way Binding and V-model Directive
"We are still missing the create and update components and in this article, we are going to implement these missing parts. With this post, we are going to finalize our application development process."
Resource 5
I created the exact same app in React and Vue. Here are the differences.
"Having used Vue at work, I had a fairly solid understanding of it. I was, however, curious to know what the grass was like on the other side of the fence — the grass in this scenario being React."
Resource 5
How I built a web app with Vue, Vuetify and Axios
"In this article, we will be building a Vue.js Application supported by Vuetify and Axios. The aim of this article is to implement a movie application which will be calling on an API"
Resource 5
Five tools to speed the development of your Vue.js applications.
"Not long ago Vue.js passed React in GitHub stars. Although a somewhat shallow metric to measure, no doubt that this is only an indicator of the great success and popularity Vue.js is gathering in the community in 2018.As we use more great frameworks like Vue to build new applications."
Resource 5
Optimize the Performance of a Vue App
"Single-page applications sometimes cop a little flack for their slow initial load. This is because traditionally, the server will send a large bundle of JavaScript to the client, which must be downloaded and parsed before anything is displayed on the screen. As you can imagine, as your app grows in size, this can become more and more problematic."
Resource 5
An introduction to dynamic list rendering in Vue.js
"An introduction to dynamic list rendering in Vue.js. List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user"
Resource 5
Using Renderless Components in Vue.js
"Most Vue apps need asynchronous HTTP requests and there are many ways to realize them: in the mounted() lifecycle hook, in a method triggered by a button, within the store (when using vuex) or in the asyncData() and fetch() methods (with Nuxt)."
Resource 5
Lazy Loading Individual Vue Components and Prefetching
"The purpose of lazy loading is to postpone downloading parts of your application that are not needed by the user on the initial page load which ends up in much better loading time."
Resource 5
How to implement client-side pagination in Vue.js
"In this post, you'll see a simple example of how to implement client-side pagination in Vue.js"
Resource 5
Dockerizing a Vue Application
"This tutorial looks at how to Dockerize a Vue app, built with the Vue CLI, using Docker along with Docker Compose and Docker Machine for both development and production. We’ll specifically focus on"
Resource 5
The difference between COMPUTED and METHODS in Vue.js
"Now it’s some months that I’m using Vue.js and something that made me confused for the first few weeks was the difference between computed and methods."
Resource 5
10 Best Vue JS Tutorial & Course [2021 MAY] [UPDATED]
"After extensive research, our team of web development experts has compiled this list of Best Vue JS Tutorial, Course, Training, Class and certification available online for 2021. It includes both paid and free resources to help you learn Vue JS and these tutorials and courses are suitable for beginners, intermediate learners as well as experts."
Resource 5
How to Add Internationalization to a Vue App
"¡Hola. Bonjour. Ciao. 你好. Here is how you add internationalization to Vue."
Resource 5
Creating Custom Directives in Vue.js
"Creating Custom Directives in Vue.js. Directives are special attributes with the `v-` prefix. A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes."
Resource 5
Getting Started with Vuetify 2.0
"With the release of Vuetify 2.0, now is the perfect time to start learning how to use this popular component framework."
Resource 5
Material Design Framework
"Vuetify is a progressive framework that attempts to push web development to the next level."
Resource 5
Building Frontend Using Vuetify
"In this article, you will learn how you can quickly build an attractive and interactive frontend very quickly using Vuetify."
Resource 5
Simple Vue.js Form Validation with Vuelidate
"Thanks to Vue's reactivity model, it's really easy to roll your own form validations. This can be done with a simple method call on the form submit, or a computed property evaluating input data on each change."
Resource 5
Deploying a Vue.js app to Netlify
"Setting up a Continuous Integration pipeline from _A to Z_ that: runs tests, builds the app and deploys it to Netlify. Let’s do it!"
Resource 5
What is Template in Vue.js
"...We have learnt in the earlier chapters, how to get an output in the form of text content on the screen. In this chapter, we will learn how to get an output in the form of HTML template on the screen..."
Resource 5
How to use Web-Components in Vue
"Learn how to seamlessly integrate and use Web Components in VueJS, including custom properties and events"
Resource 5
A few handy Vue.js tricks
"1, 2, 3, 4, 5, 6 Handy Tips"
Resource 5
How to Create an Interactive YouTube Video Selection in Vue.js
"In this post I want to share my observations during my implementation of an **interactive** YouTube Video selection in Vue. Maybe this can save you some time, if you plan to do the same."



# Vue JS with Markdown

Resource 5
Vue.js components inside Markdown — lobo_tuerto's notes
"This is a quick post to show the different ways we can use to make Vue.js components available inside Markdown content. And at the same time, see how we can import .md files inside Vue.js components."



# Vue JS Courses

Resource 5
Learn Vue.js from Scratch - Full Course for Beginners
"Learn and master one of the most popular frontend frameworks by building awesome projects"
Resource 5
Vue JS - Learning the Basics
"Vue.js is extremely popular. Learn the 7 core concepts, experience it on your own and start your Vue.js journey right now!"



# Vue JS resources on YouTube

Resource 5
VueJS Build A Todo App - Code On-The-Fly
"Want to create TODO App with Vue JS? Here is how!"
Resource 5
Vuex Crash Course - State Management
"In this video we will build an application using Vue.js with the Vuex state management library."
Resource 5
Learn Vue.js - Full Course for Beginners - 2019
"Learn to use Vue.js in this full tutorial course for beginners. Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications."
Resource 5
Build a PWA With Vue & Ionic 4
"In this project we will built a progressive web app with Vue.js and Ionic 4. We will use the @ionic/vue package and the @vue/pwa plugin to do this."
Resource 5
Natalia Tepluhina - Vue 3 - Looking into the Vueture: Composition Functions - ComponentsConf 2019
"ComponentsConf 2019 - Australian JavaScript conference with exclusive focus on frontend frameworks & libs. Vue 3 brings us a new feature: composition functions, a way of declaring component logic using function calls. In this talk I will show how composition functions work and in which cases they are better than 'usual' object syntax."



# Native Mobile Apps

Resource 5
Vue Native
"Vue Native is a framework to build cross platform native mobile apps using JavaScript."
Resource 5
NativeScript and Vue.js
"Vue.js is a lightweight framework for building engaging user interfaces. NativeScript powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences."



# Testing Vue.Js Apps

Resource 5
Vue Test Utils
"Vue Test Utils is the official unit testing utility library for Vue.js."
Resource 5
Testing Vue with Jest
"In this article to show how to setup Jest in an Vue.js application. This will guide you through everything in a blank Vue.js template to test components and more"
Resource 5
How to Test Your Vue Project with Jest and Nightwatch
"Testing is a vital part of the development cycle and a part of life for programmers and developers. ..."
Resource 5
Unit Testing in Vue: What to Test?
"Every developer knows that they should be writing tests, but in reality, many of us don’t do it at all or we aren’t doing enough of it. The problem isn’t the lack of tools, it’s that we don’t have a clear understanding of what these tools are meant to do."



# Books

Resource 5
Pro Vue.js 2
"Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of the Model-View-Controller (MVC) pattern on the client, creating a strong foundation for complex and rich web apps."



# References

Comments