What’s inside Fullstack Vue? 🦌

By Hassan Djirdeh

We (the team behind Fullstack React/ng-book and I) launched Fullstack Vue 🌟!

We’ve received a few questions on the details within the book so we thought we’d create this post highlighting what’s inside in a little more detail.

The first half of the book covers the fundamentals of the Vue framework in a progressive, example-driven approach. We first introduce the Vue library through a Content Delivery Network (CDN) before moving towards building within Webpack bundled applications. We go through examples detailing how to handle user interaction, work with single-file components, understand custom events, and then look into different ways to manage state (data) in a Vue application.

The second half of the book moves into more advanced concepts you’ll often see used in large, production-scale applications. We introduce Vuex (the flux-like library), integrate Vuex to a server-persisted app, manage rich forms, build a multi-page app that uses client-side routing, and finally explore how unit tests can be written with Vue’s official unit testing library (vue-test-utils).

Fullstack Vue stays closely aligned with Fullstack’s mission of project-driven learning. As always, this book isn’t just a book - it’s a course complete with example code for every chapter.

Fullstack Vue has:

  • 8 chapters in total and
  • 8 unique completed applications with
  • more than 430 pages of content

Here’s a little more detail of the applications built within the book.

Your first Vue.js Application

We first introduce Vue by building a voting application (named UpVote!) that takes inspiration from popular social feed websites like Reddit and Hacker News. With this app, we’ll gain an understanding of the Vue instance, default Vue directives, data binding, and an introduction to reusable components.

UpVote! 👍

Single-file Components and State Management

We’ll use Vue’s unique single-file components to create an app interface that manages events within a weekly calendar. We’ll also gather an understanding of simple state management as we manage data between the various component relationships.

Weekly Calendar App 📅

A Vuex Integrated Shopping Cart

We’ll use the flux-like library Vuex to manage data for a shopping cart application that persists information on to a local server. We’ll be introduced to the various pieces that make up the Vuex store and how Vuex modules can be used to scale the Vuex store with a domain driven mindset.

Vuex Integrated Shopping Cart 🛒

Forms with Validations

We’ll build various dynamic forms that accept user input, and give clear messaging when the input is of an invalid format. We’ll incorporate both field and form level validations as well as understand how forms can fit neatly within a Vuex based architecture.

Fullstack Inquiry Form 📃

Dynamic Routes

We’ll integrate the official vue-router library to build multiple dynamic routes and a token authentication flow, all handled on the client-side. We’ll use the powerful Vue watch property, implement login, and support navigation guards for certain routes.

Fullstack Shopping Cart II 🛒

Bulletproof Testing

We’ll use Vue’s official vue-test-utils library to create meaningful tests for a daily weather app that interacts with a third party API. We’ll create tests for components that integrate and interact with a Vuex store and router.

Testing a Weather App ☀️

1 Hour Beginner Screencast (coming soon)

For purchasers of the full package, we’re currently in the works of providing a 1 hour long screencast on building and deploying a Vue app from scratch. (We’re scheduled to release this screencast in May or June).

And a lot more!

There are a lot more mini examples that’ll show us how to use, create, and interact with custom events, a global Event Bus, a custom router, and a server API!

Download the first chapter

If you’re interested and want to get a preview of the book before purchasing, you can download the entire first chapter for free from our website:

https://fullstack.io/vue

Conclusion

Hopefully this was helpful in explaining what Fullstack Vue contains in more detail. It’s super important for us to reiterate that a huge thank you goes to the beta/early readers who’ve helped shape Fullstack Vue with their incredible feedback.

Have questions/comments? We’d love to hear from you! Reach out to us at vue@fullstack.io :).