Please note that this series is using Vue 1.0. You can still read it if you're using Vue 2.0, though, since there's not much difference between both in terms of the API. Also, note that some of the tools and approaches used here are not the latest recommended ones because a lot has changed since this series was published. Having said all of this, there are many things you'll learn in this series. So, enjoy it!

SPAs (Single Page Applications) are everywhere these days. YouTube, Gmail, Twitter, and Medium are just a few examples where SPAs are implemented either fully or partially.

SPAs extremely improve the user experience; they give the user a native-app-like experience. They also make your application much faster than ever.

But we have to admit it. Building single page applications is not an easy task. Not because it's difficult, per se, but because we're not used to building them — for most of us, it's totally a different approach to building web applications.

Many frameworks out there to help us build SPAs… but nothing is like Vue.js. I really couldn't imagine any simpler way to build single page applications than with Vue.

The most amazing thing about Vue is its flexibility. Although in its core it's just a simple view layer library, it can be perfectly used to build large-scale single page applications — and this is what we're going to learn in this series.

What will we be building?

After thinking about an example for this series, I couldn't come up with a better example than a simple forum. Many reasons, but in short, it has everything we need to learn that a typical SPA would have.

To get an idea of what we're going to build, you can now get the whole demo from — installation steps are included.

What will we cover in this series?

Many things. But here are the main ones:

Routing

• Make Laravel & Vue play nicely together (without the #!).
• Understanding the basics of transitions.
• The perfect use of custom fields.
• Redirects for (404 pages, non/authenticated users).

Building a simple Backend API with Laravel

• Using Vue-Resourse for HTTP requests/responses.
• The goodness of Interceptors.
• Showing a nice progress bar while waiting for the response.

Authentication with JWT

• Understanding the basics of JWT (JSON Web Tokens).
• Authorization — can the user edit or delete a specific item?

Others

• Pagination.
• Custom services.
• Reusable Modal component.
• The good use of events.
• How to make it easier by pushing responsibilities from the client to the server.

Don't worry if it looks like there are too many things to learn. Some of these things can be done, literally, in a couple of lines.

Also, the fact that I'm going to break this series down into multiple digestible posts will, hopefully, make things easier.

Prerequisites

Before you begin, make sure you understand the basics of Vue and a little bit of Laravel as this series will exclusively focus on building single page applications — So I assume you already know the basics.

Now, when you're ready, move on to part two to kick things off and start setting things up.