Nilson Jacques - Jump Start Vue.js

Copyright 2021 SitePoint Pty. Ltd.

Ebook ISBN: 978-1-925836-45-5

• Product Manager: Simon Mackie
• Technical Editor: Jeffrey Smith
• English Editor: Ralph Mason
• Cover Designer: Alex Walker

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.

10-12 Gwynne St, Richmond, VIC, 3121
Australia
Web: www.sitepoint.com
Email: books@sitepoint.com

SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. Youll find a stack of information on JavaScript, PHP, design, and more.

Nilson Jacques is a full-stack developer from England with over a decade of experience in the industry. He's a long-time author and previous JavaScript channel editor for SitePoint, with a passion for the Web.

Welcome to the second edition of Jump Start Vue.js!

In September 2020, we finally got the official release of Vue 3.0 wed been eagerly awaiting. The biggest change by far was the introduction of the Composition APIa powerful set of utilities for defining Vue components in a whole new way. In addition, the framework received major performance enhancements that increased speed and cut bundle sizes.

When writing the first edition of this book back in 2018, my aim was to create a guide to Vue.js that would be accessible to the average developer. By covering a broad range of topics, I hoped to quickly get readers to a point where they had the skills to go out and start creating their own applications.

While the second edition of this book is still aimed at those new to Vue and getting them productive with it in a short space of time, I devote a whole new chapter to the Composition API and some of its more advanced usages. This section will be of interest to developers looking to gain more in-depth knowledge of the (probable) future direction of Vue.

I hope youll find that the balance between breadth and depth hits the sweet spot, and that the book inspires you to go forth and create great Vue apps. Lets get started!

This book is for developers with experience of JavaScript. If youve already used a component-based JavaScript framework such as React, youll find this book an easy read, but its also suitable for readers with no prior experience of such frameworks.

Code in this book is displayed using a fixed-width font, like so:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

• https://www.sitepoint.com/community/ are SitePoints forums, for help on any tricky problems.
• This book's code archive is available on GitHub.
• books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

Since Facebook introduced React in 2013, component-based UI frameworks have become increasingly popular. They allow you to build your applications as collections of self-contained, reusable components that can manage their own state and can be declaratively composed into more complex interfaces.

The second generation of Googles Angular framework is based around the component paradigm, and a number of smaller, light-weight libraries such as Hyperapp have cropped up in recent years.

Amidst this seemingly ever-growing collection of frameworks and libraries came Vue.js (referred to simply as Vue from here on). Released in 2014, Vue was created by a Google engineer called Evan You, who was inspired to create it after having worked with AngularJS.

Vue has seen a meteoric rise in popularity and is now considered one of the main front-end frameworks, and not without good reason. It was designed to be flexible and easy to adopt, making it just as easy to integrate into projects and use alongside non-Vue code as it is to build complex client-side applications.

If youre reading this, youve already decided that Vue is worth a look, but there are plenty of good reasons to choose it for your next project.

• Its easy to sprinkle onto an existing site. You can start using Vue on existing websites without having to implement a build step and introduce a new setup and tooling to your workflow. In fact, Vue is the perfect go-to tool for many situations where youd previously have reached for jQuery!

• Vues component-based architecture. Of course, Vue is also more than capable of building modern single-page applications (SPAs), allowing you to develop your apps as modular, reusable components.

• Its comprehensive ecosystem. Pre-built components for almost every conceivable use are available from Vues large community of developers. On top of that, popular libraries exist to provide common functionality such as client-side routing, state management, and server-side rendering! Many of these are also maintained by the official Vue team, in contrast to React, where there arent always official solutions available.