Front-end web development has become astoundingly complex. If youve never used a modern JavaScript framework, building your first app that just displays Hello can take a whole week! That might sound ridiculous, but most frameworks assume knowledge of the terminal, advanced JavaScript, and tools such as the Node Package Manager (NPM), Babel, Webpack, and sometimes more.
Hassan provides a catalyst for that growth in this book. Through project-driven learning, hell guide you from the simplest examples through the necessary skills for large-scale, enterprise applications. Along the way, youll learn not only how to solve a variety of problems with Vue, but also the concepts and tools that have become industry standards no matter what framework you use.
How to Get the Most Out of This Book
Overview
This book aims to be the single most useful resource on learning Vue.js. By the time youre done reading this book, you (and your team) will have everything you need to build reliable, powerful Vue applications.
Vue is built on the premise of simplicity by being designed from the ground up to be incrementally adoptable. After the first few chapters, youll have a solid understanding of Vues fundamentals and will be able to build a wide array of rich, interactive web apps with the framework.
But beyond Vues core, there are tools and libraries that exist in the Vue ecosystem thats often needed to build real-world production scale applications. Things like client-side routing between pages, managing complex state, and heavy API interaction at scale.
This book can be broken down into three parts.
In Part I, we cover all the fundamentals with a progressive, example-driven approach. Youll first introduce Vue through a Content Delivery Network (CDN) before moving towards building within Webpack bundled applications. Youll gain a grasp of handling user interaction, working with single-file components, understanding simple state management, and how custom events work.
We bookend the first part by introducing Vuex and how Vuex is integrated to manage overall application data architecture.
Part II of this book moves into more intermediate/advanced concepts that youll often see used in large, production applications. Well 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 Vues official unit testing library.
In Part III of the book, we cover advanced topics within Vue and the Vue ecosystem. Well investigate how to build reusable component logic with Vues Composition API, introduce the concept of TypeScript and see how it can be used within a Vue app, and finally explore GraphQL and the Vue Apollo library for integrating GraphQL to our Vue applications.
First, know that you do not need to read this book linearly from cover-to-cover. However, weve ordered the contents of the book in a way we feel fits the order you should learn the concepts. Some sections in Part II assume youve acquired certain fundamental concepts from Part I. As a result, we encourage you to learn all the concepts in Part I of the book first before diving into concepts in Part II and moving towards to Part III.
Second, keep in mind this package is more than just a book - its a course complete with example code for every chapter. Below, well tell you:
- how to approach the code examples and
- how to get help if something goes wrong
Vue 3.x
In Sept. 2020, the Vue framework was updated and released as version 3.0. Vue 3.0 provides a suite of changes such as smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework. Vue 3.0 continues to build on concepts that existed in Vue 2.x such as the Virtual DOM, render functions, and server-side rendering capabilities (i.e. Vue 3.0 is not a complete rewrite of Vue 2.x). In addition, version 3.0 was rewritten to provide significant performance improvements over v2.
This book covers, and will always cover, the latest release of Vue - which is currently labelled as version 3.x.
Running Code Examples
This book comes with a library of runnable code examples. The code is available to download from the same place where you purchased this book.
If you have any trouble finding or downloading the code examples, email us at vue@fullstack.io.
Webpack projects
For Webpack-bundled projects, we use the program npm
to run examples. You can install the application dependencies with:
npm install
And boot apps with one of the following commands:
npm run start