Book Image

Vue.js Quick Start Guide

By : Ajdin Imsirovic
Book Image

Vue.js Quick Start Guide

By: Ajdin Imsirovic

Overview of this book

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and ?exibility are some of the key benefits that Vue offers to developers. This book will help you learn everything you need to know to build stunning reactive web apps with Vue.js 2 quickly and easily. This book will take you through the Vue 2 framework. You will start by learning the different Vue installation options: CDN, NPM, and Vue CLI. Then we will look at the core concepts of Vue: templates and components – ways to modularize Vue code. You will learn how to utilize directives, which are Vue-specific HTML attributes with additional features. Also, you will see how Vue uses a streamlined approach to development, with reusable methods, computed properties, and watchers, and how it controls state with the help of its data option. You will learn about the concepts of reactive programming in Vue, and how to understand communication between parent and child components. We will take a look at props and slots, working with CSS, filters, and mixins. We will also look at ways to add transitions and animations to Vue apps. Then you will extend Vue by building custom directives and your own plugins. Finally, you will learn about Vuex – a Vue plugin that allows us to centralize state, and also introduce Nuxt, which is a framework that builds on top of Vue and solves some issues of single-page applications. After learning about these components, you will be ready to build your own reactive web apps with Vue.js 2.
Table of Contents (15 chapters)
Title Page
Copyright and Credits
Packt Upsell

What problems does Vue solve?

Without trying to make an extensive list, let's quickly highlight some of Vue's greatest strengths:

  • Vue—a jQuery successor?
  • Vue is a great learning tool for beginners
  • Vue is a versatile and progressive framework
  • Vue is an awesome tool for animations and interactions
  • Vue's approach is similar to other modern frontend frameworks and libraries

Next, let's briefly go over each of these points.

Vue, a jQuery successor

The famous jQuery library appeared in 2006. When it came out, it did a few things beautifully:

  • It made writing cross-browser JavaScript a lot easier, which was a big plus at the time since it dramatically decreased the need for developers to mess with various browsers' quirks and inconsistencies
  • It had a simple syntax that made it easier to target and manipulate specific DOM nodes, which is beautifully phrased in their motto write less, do more
  • It was an excellent entry point to learning JavaScript in general
  • It had a great API that made working with Ajax simple and easy

However, a lot has changed since then—for the better.

Arguably, the biggest improvement that happened in JavaScript-land between 2006 and today is the virtual DOM. 


The virtual DOM was a paradigm shift: we no longer had to write procedural, spaghetti JS to instruct the browser on how to traverse and manipulate the DOM. Instead of telling the browser how to update the DOM, we can now simply tell it what to update. Or, to be more specific, we tell a framework what to update—a framework like View or React. The actual implementation of the virtual DOM is framework-specific and not really something to be concerned with at this point.

We can now work with the DOM indirectly, by using declarative code that deals with the virtual DOM implementation of the underlying framework. This abstraction is the one thing that more or less made jQuery redundant.

Of course, since so many apps are still powered by jQuery and since legacy code has a tendency to stick around, jQuery will be alive and well in the years to come. 

However, the paradigm shift in the way we think about DOM manipulation makes Vue a strong contender to jQuery's throne as the most popular game in town.

Vue also has other advantages: it is an excellent starting point to learn present-day frontend development. The barrier to entry is really low.

A learning tool for beginners

If a jQuery developer was faced with the option of learning either of the modern frontend frameworks/libraries, React, Angular, Vue, Ember... which one would probably be the easiest to get started with?

Vue, of course!

As we've seen already, getting started with Vue can be as simple as importing a CDN. And since we humans are wired to thrive on small, frequent victories, Vue seems to be the happy route to take. This is not to say that a developer should not try to learn other frontend frameworks too. It just seems that Vue is the easiest way to get started and the best way to get productive quickly.

A versatile and progressive framework

The official website for Vue JS says that Vue is the Progressive JavaScript Framework. This means you can add Vue to an existing server-side project incrementally. Basically, you can add Vue to just one simple section of your website. No wonder Laravel chose to bundle with Vue on its frontend.

But you don't have to settle for only sprinkling Vue in here and there. You can also extend it using Vuex and Vue-Router. This makes Vue very versatile and usable in a number of different scenarios.

A tool for animations and transitions

If you need to make high-performance animations and transitions, look no further than Vue! Vue's animations API is very easy to understand and it's a joy to use. It is so easy to do animations in Vue that you will be amazed at how much you can accomplish in a very short time.

Features similar to other modern frontend frameworks and libraries

Just like other modern frontend frameworks, such as React and Angular, Vue has the following:

  • Virtual DOM
  • A command-line interface (Vue-cli)
  • State management (Vuex)
  • Routing (Vue-Router)

However, it seems that Vue's core team is going out of their way to make Vue as approachable as possible. This is evident in several examples:

  • The effort they've put in to avoid the hassle of setting up Vue-cli, which makes it very easy to get started with 
  • The lack of complicated toolchains
  • The simplicity of Vue's API

Like the official project's website states, Vue is approachable, versatile, and performant.