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.
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.
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.
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.
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.
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.
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.
Today’s article is going to introduce the Vue Devtools - a browser extension tool built to help debug Vue applications.
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.
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).
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.
Vue Components - Global Components
In today's session, we'll be building our first global Vue component.
Vue Components - Props
Today, we'll discuss how props can help us pass data from parent components down to child components.
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.
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.
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.
Render Functions and JSX
Single File Components
Today, we'll discuss one of Vue's most useful features in helping build large scale Vue applications - Single File Components.
Today, we're going to discuss Vue's official development tool in helping build and scaffold Webpack bundled Vue applications rapidly.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.