Vue.js Quick Start Guide

Learn how to build amazing and complex reactive web applications easily using Vue.js

Ajdin Imsirovic

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781789344172
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Learn and explore all important features of Vue.js through a number of simple examples.

Key Features

• Uses latest features such as Vue-cli 3, Vuex, and Nuxt
• Practical examples to understand Vue 2 quickly
• Step-by-step approach to reinforce concepts covered

Book Description

Vue.js is the latest trending frontend framework. Simplicity, reactivity, and flexibility 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.

What you will learn

• Develop apps with Vue.js
• Reuse components using slots
• Use filters, mixins, and global mixins in Vue
• Build custom directives in Vue
• Work with CSS animations
• Work with templates, directives, methods, data, computed properties, and watchers
• Use Nuxt and Vue-Router
• Build and deploy an SSR Vue app

Who this book is for

This book is for people who want to learn and experience developing with Vue.js. Familiarity with HTML, CSS, and JavaScript will help you get the most from this book.

Working with Vue-CLI, Components, Props, and Slots

The previous chapter was an introduction to the basic concepts of Vue. We will start this chapter with a more realistic approach: we'll introduce Vue-cli. We'll look at the component hierarchy, global and local components, and communication between components. We will introduce slots, and we will also examine the difference between slots and props.

In this chapter, we will cover the following topics:

• Vue component hierarchy, and global and local components
• Using Vue-cli
• Setting up code editors to use with Vue
• The structure of our Vue-cli-based project
• Adding basic functionality to a child component
• Adding props to our HelloAgain.vue
• Introduction to slots

Vue component hierarchy, and global and local components

As we learned in Chapter 2, Basic Concepts of Vue 2, to get a new Vue instance running, we use new Vue:

new Vue(
 el: "#app",
 // the rest of the Vue instance code here
)

Our app component resides inside this Vue instance.

The app component usually has a child component, like we saw in this example from Chapter 2, Basic Concepts of Vue 2: https://codepen.io/AjdinImsirovic/pen/xzpOaJ:

Vue.component('custom-article', {
 template: `
 <article>
 Our own custom article component!
 </article>`
})
new Vue({
 el: '#app'
})

What we did not mention in the previous chapter is this:

• A child component can be reused as many times as needed
• A child component can also have its own children

An example of this is available in the following pen: https://codepen.io/AjdinImsirovic/pen/ZjdOdK.

Here is the code which demonstrates these two principles:

// JS
Vue.component('custom-article', {
 template: `
 <article>
 Our own custom article component!
 </article>`
})
Vue.component('another-custom-article', {
 template: `
 <article>
 Another custom article component! 
 This one has it's own child component too!
 Here it is:
 <custom-article></custom-article>
 </article>`
})
new Vue({
 el: '#app'
})

/* CSS */
article {
 font-size: 40px;
 padding: 20px;
 color: limegreen;
 font-family: Arial;
 border: 3px solid green;
 border-radius: 10px;
}

<!-- HTML -->
<main id="app">
 <custom-article></custom-article>
 <custom-article></custom-article>
 <another-custom-article></another-custom-article>
</main>

As seen already, to add a component to our Vue instance, we are using the following syntax:

Vue.component('another-custom-article', { // etc...

In Vue terminology, we use this code to register a component. As described before, it's referred to as global registration. There is also local registration.

Local registration works similarly to the Vue.component syntax. The only difference in the code is how we introduce the local component when compared to a global one. In the previous code, we had the following global component:

Vue.component('custom-article', {
 template: `
 <article>
 Our own custom article component!
 </article>`
})

Converting this global component to a local component is as simple as removing this snippet of code:

Vue.component('custom-article'

Instead of the previous code, we'll simply make a new variable and give it the exact same options object that we used in the global component, like this:

var customArticle = {
 template: `
 <article>
 Our own custom article component!
 </article>`
}

In order to use this local component in our Vue instance, we'll introduce the components option, like this:

new Vue({
 el: '#app',
 components: { 
 'custom-article': customArticle
 }
})

An example with a local component is available here: https://codepen.io/AjdinImsirovic/pen/ZMzrpr.

However, the previous example is incomplete on purpose. As we can see, the customArticle local component is only available in the main Vue instance, but it is not available in the anotherCustomArticle component.

To make this work and complete the example, we need to tweak this bit of code:

Vue.component('another-custom-article', {
 template: `
 <article>
 Another custom article component! 
 This one has it's own child component too!
 Here it is:
 <custom-article></custom-article>
 </article>`,
 //components: {
 // 'customArticle': customArticle
 //}
})

We will simply remove the comments on these three lines:

 components: {
 'customArticle': customArticle
 }

By doing that, we have registered the local component customArticle in the global component anotherCustomArticle. Basically, we are following the same procedure of registering a local component in our main Vue instance, and we are applying that same approach of registering local component in our anotherCustomArticle global component.

To get into the nuances of global and local registration, you can refer to this section of the official Vue documentation:
https://vuejs.org/v2/guide/components-registration.html.

In the following section, we'll start using Vue-cli.

Using Vue-CLI

In order to start using Vue-cli, we need to have Node.js set up on our machine, and we also need to have a command-line app on our operating system of choice.

For example, my preferred tools are Windows 10 and Git bash for Windows.

There are many different operating systems and command-line apps that you could potentially be using.

If you run into problems during the installation of any of the tools mentioned in this section, it might be worthwhile to have a look at this in-depth guide on installing Node.js on your operating system:

https://www.packtpub.com/mapt/book/web_development/9781788626859/2

Installing Git bash

You first need to visit https://git-scm.com/downloads, which lets you choose between macOS X, Windows, and Linux/Unix installations. After clicking on the Windows download, you can proceed with the installation steps for Git bash. Just following the default preset options during the installation should be fine.

Installing nvm

To download the Node version manager for Windows, visit this link:
https://github.com/coreybutler/nvm-windows/releases

Once on the page, click the nvm-setup.zip file to download it, then run the downloaded nvm-setup.exe and go through the regular installation steps.

Next, start Git bash with administrator privileges and run the following command:

nvm install 8.11.4

The following message will be logged to the console:

Down...