In the time of information overload and rapid technology advancement it is really hard to follow and try out all the interesting projects, articles and samples. I have compiled a list of resource for Vue JS framework that I am interested to try and review and share. I will split resources by topics.
Sample projects
"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."
"Recently, me and my friend built a location-based chatroom called — Near (https://near.idgo.me). 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."
"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."
"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!"
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."
"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."
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."
"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 with Vue.js
"We will build a simple project that handles authentication and prepare basic scaffolding to use when building the rest of the app."
How to setup JWT authentication with ASP.NET Core 2, Vue.Js, and Facebook OAuth.
"Create a simple VueJS frontend app running on a Vert.x backend, providing login with Google OAuth2 from scratch"
"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."
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"
"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
"In this article, I’d like to share a few common issues that you may have to deal with when working with Vue.js."
"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..."
"In this post, we will look at how to use render functions to unleash the power of JavaScript by using templates in Vue."
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..."
"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..."
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."
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."
Creating Vue.js Client Side – Two-way binding and v-model directive (Create and Update Components)
"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."
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."
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"
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."
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."
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"
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)."
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."
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"
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"
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."
Top 10 most popular Vue.js tutorials
"I’ve created a list of the 10 most popular Vue.js tutorials based on the page views."
How to Add Internationalization to a Vue App
"¡Hola. Bonjour. Ciao. 你好. Here is how you add internationalization to Vue."
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."
How To Use Google Maps With Vue.js Apps
"Building a Vue.js address book app with maps to display a contact’s location"
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."
Vuetify.js - Vue Material Design Component Framework
"Vuetify is a progressive framework that attempts to push web development to the next level."
Building Frontend Using Vuetify
"In this article, you will learn how you can quickly build an attractive and interactive frontend very quickly using Vuetify."
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."
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!"
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..."
How to use Web-Components in Vue
"Learn how to seamlessly integrate and use Web Components in VueJS, including custom properties and events"
How to implement and use Google reCaptcha with Vue.js and .Net
"This article will cover how to implement google reCaptcha v2 using Vue.js and .Net."
A few handy Vue.js tricks
"1, 2, 3, 4, 5, 6 Handy Tips"
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 Courses
Vue.Js resources on YouTube
- VueJS Build A Todo App | Code On-The-Fly
- Vuex Crash Course | State Management - YouTube
- Learn Vue.js - Full Course for Beginners - 2019
- Build a PWA With Vue & Ionic 4
- Natalia Tepluhina | Vue 3 | Looking into the Vueture: Composition Functions | ComponentsConf 2019
Native Mobile Apps
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
Vue Test Utils
"Vue Test Utils is the official unit testing utility library for Vue.js."
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"
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. ..."
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."
"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"
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. ..."
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
"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."
