30 Days of Vue

A free introduction to Vue in 30 bite-size morsels

Interested in learning Vue but having trouble getting started?

We'll teach you how it all works - for free.

Over the next 30 days, we'll walk through everything you need to know to work with Vue. From the very beginning through topics like the Vue Instance, Components, and even Testing.

Week 1

Day 130 Days of Vue

What is Vue?

Over the next 30 days, we’re going to walk through everything you need to know to get started with the Vue framework. From the very beginning through topics like the Vue Instance, Components, and even Testing.

Day 1

Day 230 Days of Vue

The Vue Instance - Data

Now that we know how to instantiate a Vue application with the Vue instance, let's take a deeper look into how the data property of a Vue instance helps enable reactivity.

Day 2

Day 330 Days of Vue

The Vue Instance - Data Driven Applications

In yesterday’s article, we’ve come to understand how data behaves reactively in Vue. Today, we’re going to spend a little more time discussing this behavior since it plays an especially important role in how we build applications in Vue.

Day 3

Day 430 Days of Vue

Vue Directives

The last article was a little heavy on discussion. In today's article, we’ll dive into more code examples by addressing some important native Vue directives.

Day 4

Day 530 Days of Vue

List Rendering with v-for

Today we're going to work through how the v-for directive can be used to dynamically render a list of elements based on a data source.

Day 5

Day 630 Days of Vue

Form Handling with v-model

In yesterday’s article, we discussed the v-for directive and its role in helping display lists of elements. Today, we’ll spend a little time taking a look at the v-model directive and its ability to create two-way data binding.

Day 6

Week 2

Day 730 Days of Vue

Vue Devtools

Today’s article is going to introduce the Vue Devtools - a browser extension tool built to help debug Vue applications.

Day 7

Day 830 Days of Vue

Methods and Computed Properties

Today, we'll take a look at the computed property of a Vue instance and see how it differs from using a standard instance method.

Day 8

Day 930 Days of Vue

Watchers

Yesterday, we discussed how methods and computed properties work within a Vue instance. Today, we’ll briefly discuss another instance property called watchers (or sometimes known as the watch property).

Day 9

Day 1030 Days of Vue

Lifecycle Hooks

Today, we're going to talk a bit about how an instance lives in an application. That is, we'll talk about the Vue instance’s lifecycle.

Day 10

Day 1130 Days of Vue

Vue Components - Global Components

In today's session, we'll be building our first global Vue component.

Day 11

Day 1230 Days of Vue

Vue Components - Props

Today, we'll discuss how props can help us pass data from parent components down to child components.

Day 12

Week 3

Day 1330 Days of Vue

Vue Components - Custom Events

Yesterday, we saw how props can be used to pass data downwards from parent to child. Today, we'll see how custom events can facilitate communication in the opposite direction - from child to parent.

Day 13

Day 1430 Days of Vue

Vue Components - Nice To Knows

Today, we'll cover some interesting points that govern the use of Vue components such as the ability to locally register components, the requirement to having the component data property always be a function, and the restriction to using a single root template.

Day 14

Day 1530 Days of Vue

Vue Components - Template Definitions

Today, we'll be taking a look at some of the different ways we can declare the template/markup of a component.

Day 15

Day 1630 Days of Vue

Render Functions and JSX

We took a look at the different types of component templates in yesterday's article. Today, we'll look to use a render function to create the markup of a component entirely with JavaScript.

Day 16

Day 1730 Days of Vue

Single File Components

Today, we'll discuss one of Vue's most useful features in helping build large scale Vue applications - Single File Components.

Day 17

Day 1830 Days of Vue

Vue CLI

Today, we're going to discuss Vue's official development tool in helping build and scaffold Webpack bundled Vue applications rapidly.

Day 18

Week 4

Day 1930 Days of Vue

Custom Events and the EventBus

Today's session will be the first of a series of articles discussing different methods to managing application wide data. We'll begin by reintroducing props and custom events before taking a look at how a global EventBus can facilitate application wide communication.

Day 19

Day 2030 Days of Vue

Simple Global Store

Yesterday, we gathered an understanding of how a global EventBus can use its events interface to have isolated components communicate with one another. Today, we’ll see how a Simple Global Store can be a more useful approach to handling state management.

Day 20

Day 2130 Days of Vue

Introduction to Flux

Handling data inside large client-side applications is a complex task. Today we're looking at a one method of handling complex data proposed by Facebook called the Flux Architecture.

Day 21

Day 2230 Days of Vue

Vuex

With the knowledge of the Flux pattern and Vuex, let's integrate Vuex onto a Vue application to build on top of the things we've learned using a simple global store.

Day 22

Day 2330 Days of Vue

Introduction to Routing

The majority of large-scale applications we tend to create will usually have multiple views be kept in different routes. Today, we'll discuss client-side routing and set up the starting point of the routing application we'll build.

Day 23

Day 2430 Days of Vue

Vue Router

With our application scaffold established in the last article, let's use Vue's official client-side routing library, Vue Router, to enable routing in our application.

Day 24

Week 5

Day 2530 Days of Vue

Introduction to Testing

Test suites are an upfront investment that pay dividends over the lifetime of a system. Today, we'll introduce the topic of testing and discuss the different types of tests we can write.

Day 25

Day 2630 Days of Vue

Implementing Tests

Yesterday, we discussed the importance of testing and some of the different types of unit testing libraries/suites that exist. Today, we'll begin to see unit testing in action.

Day 26

Day 2730 Days of Vue

Testing the App

Today, we'll start creating unit tests by looking at a few features of our application, thinking about where the edge cases are and what we assume will happen with the component.

Day 27

Day 2830 Days of Vue

Better testing with Vue Test Utils

Today, we'll look at Vue’s official testing library called Vue Test Utils that makes testing fun and relatively easy.

Day 28

Day 2930 Days of Vue

Vue 3.0 and the future of Vue

In today's article, we'll take a brief look at some of the cool features Vue 3.0 is expected to bring when it arrives.

Day 29

Day 3030 Days of Vue

Wrap-up and more resources

We've made it! Day 30. Congrats! Now you have enough information to create Vue applications with the Vue CLI, integrate data with Vuex, enable client-side routing with Vue Router, and even conduct testing with the Vue Test Utils library.

Day 30

FAQ

What is this?: This course is a series of articles which teach you how to use Vue from the ground up. The series provides a step-by-step process you can use to learn Vue from an empty folder to a Webpack-bundled Vue app.
What if I get stuck?: Just send us an email and we'll be happy to help you get unstuck.
Who wrote this?: We're the authors of the Fullstack Vue Book.

Course Author

Hassan Djirdeh

Front End Developer @Shopify | Creator of TinyHouse | Author of Fullstack Vue

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

About

Learn new tech with project-based programming books, videos, and tutorials.