Vue.js Tutorial - From The Ground Up

Introduction, Installation & Outputting Data

Welcome to Vue.js from scratch. In this first episode, let's introduce Vue.js and create a world where we can explore all of the features provided by this modern javascript framework. Let's get started!

Binding Data & Simple To-Do Example

Now that we understand how to get Vue working on a project, let's talk about what it means for Vue to be a data-driven framework. Come along as we build a simple to-do list from scratch.

Conditional Rendering with v-if and v-else

Conditional rendering refers to toggling the visibility of an item using a true or false statement. Let's explore how to show or hidden items using v-if and v-else. Finally, let's recreate our to-do list and toggle the items as checked or not.

Computed Properties

Computed properties are a way for us to calculate things like tax and product totals. Follow along as we refactor messy code into nicely named computed properties.

Methods vs. Computed Properties

Let's learn about adding functions or methods to our Vue instances. Then, let's compare them to computed properties and spot the difference.

Components 101

Vue Components are an integral part of Vue. Come along as we explore our very first Component from scratch. We'll start off with some data and then pass that to our template to render it. Then we'll use a local toggle variable to hide or show the description.

NPM, Webpack & Single File Component

It's time for us to depart from the compiled CDN of Vue and start compiling our own assets with NPM and Webpack. We will be pulling in Laravel Mix but just for it's Webpack configurations. Finally, we are going to refactor into a Single-File Component.

Custom Events Passing Data from Child to Parent

Now that we have a nice modern npm and webpack build, let's tackle getting our components to communicate. In Vue, this is done using custom events. We can emit an event on our child component and then listen for that event on our parent event. Follow along as we code a simple example from scratch.

Making HTTP Requests with Axios, API Example

Let's start off by pulling in axios, a simple JS library that allows us to make http request. Then let's implement a simple api request using JSONPlaceHolder, a nice testing api service. Then use the results to display them on the page.

Introduction to Vue CLI and Vue UI Tool

The Vue CLI tool scaffolds a complete Vue application for you from scratch with very minimal setup. Along side of it, you have Vue UI tool at your disposal for a GUI interface you can interact with. Let's set both of those up.

Class and Style Bindings

Class bindings are a way for us to conditionally add or remove class from a ui element in our DOM. Alternately, you can add some inline styles using the same technique. Let's explore both of those options in this episode.

Simple Routing From Scratch

Let's setup a simple routing implementation for our project using some clever javascript and Vue.

Vue Router

Vue Router is the official plugin for creating robust single page applications. In this episode, we install and create a simple 3 page SPA showing the basics of routing with Vue Router.

Autocomplete

An autocomplete dropdown menu is a nice feature to add when there's a set number of items an open field can be. Today, we are exploring how to code one from scratch using Vue and Tailwindcss.

Pricing Component

We've talked about Vue's data-driven approach but in this example we are diving deep in exploring the many features that allows Vue to manipulate data effectively. We will be building a pricing page front scratch.

Auto Format Input Fields

A cool way to spice up your forms is to add some auto format to your input fields. Allowing your users to get automatic feedback on things like phone numbers that need to follow a particular template. In this lesson, we write a phone auto format component, from scratch.