Vue.js 2 Cookbook

Andrea Passaglia

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781786465061
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

101 hands-on recipes that teach you how to build professional, structured web apps with Vue.jsAbout This Book• Understand and use Vue's reactivity system, data binding, and computed properties• Create fluid transitions in your application with Vue's built-in transition system• Use Vuex and Webpack to build medium-to-large scale SPAs and enhance your development workflowWho This Book Is ForThis book is for developers who want to learn about Vue.js through practical examples to quickly and efficiently build modern, interactive web applications. Prior experience and familiarity with JavaScript, HTML, and CSS are recommended as the recipes build upon that knowledge. It will also enable both new and existing Vue.js users to expand their knowledge of the framework.What You Will Learn• Understand the fundamentals of Vue.js through numerous practical examples• Piece together complex web interfaces using the Vue.js component system• Use Webpack and Babel to enhance your development workflow• Manage your application's state using Vuex and see how to structure your projects according to best practices• Seamlessly implement routing in your single page applications using Vue Router• Find out how to use Vue.js with a variety of technologies such as Node.js, Electron, Socket.io, Firebase, and HorizonDB by building complete applicationsIn DetailVue.js is an open source JavaScript library for building modern, interactive web applications. With a rapidly growing community and a strong ecosystem, Vue.js makes developing complex single page applications a breeze. Its component-based approach, intuitive API, blazing fast core, and compact size make Vue.js a great solution to craft your next front-end application.From basic to advanced recipes, this book arms you with practical solutions to common tasks when building an application using Vue. We start off by exploring the fundamentals of Vue.js: its reactivity system, data-binding syntax, and component-based architecture through practical examples.After that, we delve into integrating Webpack and Babel to enhance your development workflow using single file components. Finally, we take an in-depth look at Vuex for state management and Vue Router to route in your single page applications, and integrate a variety of technologies ranging from Node.js to Electron, and Socket.io to Firebase and HorizonDB.This book will provide you with the best practices as determined by the Vue.js community.Style and approachThis book offers detailed, easy-to-follow recipes that will help you harness full potential of Vue.js. The guide will provide you with working code examples for many of the common problems that web developers face. Each recipe is designed to help you quickly understand and solve a particular problem that is commonly faced by developers using Vue.js in a simple and intuitive manner. This book also includes larger recipes to address obstacles arising from building medium-to-large scale applications with Vue.js.

All About Components

In this chapter, the following recipes will be covered:

• Creating and registering a component
• Passing data to your components with props
• Making components talk to each other
• Making components talk with Vuex
• Reading a child's state
• Using components in your own components
• Using mixins in your components
• Content distribution with slots
• Single file components with Webpack
• Loading your components asynchronously
• Having recursive components
• Reusable component checklist

Introduction

Vue is very appealing to designers because of its very close relationship with raw HTML and CSS. However, Vue is also attractive to frontend engineers because it has very sound engineering. The main characteristic of Vue architecture is how everything can be discretize as a component.

Having components all the way down makes your program, no matter how big, workable in isolated chunks. You can always add a new one without affecting others, and you can always throw away what you don't need, being sure that nothing will break.

Actually, this will be the ideal situation. The truth is that writing well isolated (loosely coupled) components is not always straightforward. There might be the case that two components are meant to work together or they have a specific way to communicate with each other.

If you follow the recipes in this chapter with attention and dedication, you will take mostly the good sides of components, and you will learn how to avoid some common pitfalls.

Creating and registering a component

The first step in dealing with components is to create one. Once the component is registered, we need to tell a Vue instance about it so that it can use the component. In this recipe, you will build your first component.

Getting ready

In this recipe, we will not use any particular knowledge. If you're starting off, my only suggestion is to take a look at the recipes in the first chapter.

How to do it...

Writing your first component will be a snap. You will build a lightbulb!

Here's the relevant code:

 Vue.component('light-bulb', { 
 template: ` 
 <div class='light-bulb'> 
 <p>
 
  
Eureka!</p> 
 </div> 
 ` 
}) 

The little quote sign just after template--`--is in reality a back tick. It doesn't exist in all the keyboards; if you don't find it in yours, you will have to copy and paste it. It's part of ES6 syntax, and it tells the browser (or transpiler) that the string may span more than one line.

To use our component, we need our usual Vue instance:

 new Vue({ 
 el: '#app' 
}) 

Also, we need some HTML to actually place it in the page:

 <div id="app"> 
 <light-bulb></light-bulb> 
 <light-bulb></light-bulb> 
 <light-bulb></light-bulb> 
</div> 

If you run the application now, you will see three lightbulbs. What a great idea!:

How it works...

A component is extremely similar to a Vue instance. Here, I am quoting from the official documentation:

In Vue, a component is essentially a Vue instance with predefined options.

As a matter of fact, even the anatomy of declaring a Vue instance is quite similar to declaring a Vue component. Let's put them side by side and identify the similarities and differences:

Vue.component('light-bulb', { template: ` <div class='light-bulb'> <p> Eureka!</p> </div> ` })

new Vue({ el: '#app' })

The first thing you should note is the option objects present in both. While it contains only the template option in the lightbulb components, it contains only the el option in the Vue instance.

These two options are related but different. The template option talks about the shape of the component, and the el option tells us about the position of the component.

So, while talking about the lightbulb, we know what shape it has just by looking at the preceding code but we don't know where it is in the web page. On the other hand, looking at the code for the Vue instance, we know where it will be mounted, but we don't know how it will look. Where is the el for the light bulb, and where is the template for the Vue instance?

Well, it's express in the HTML code:

 <div id="app"> 
 <light-bulb></light-bulb> 
 <light-bulb></light-bulb> 
 <light-bulb></light-bulb> 
</div> 

We know that the Vue instance will look like the insides of the <div> app, and we know that the light bulb will be mounted whenever the <light-bulb> tag is encountered. Why this tag you ask? It's because that's the name we gave to our component. The ge...

Table of contents

• Title Page
• Credits
• About the Author
• About the Reviewer
• www.PacktPub.com
• Customer Feedback
• Dedication
• Preface
• Getting Started with Vue.js
• Basic Vue.js Features
• Transitions and Animations
• All About Components
• Vue Communicates with the Internet
• Single Page Applications
• Unit Testing and End-to-End Testing
• Organize + Automate + Deploy = Webpack
• Advanced Vue.js – Directives, Plugins, and Render Functions
• Large Application Patterns with Vuex
• Integrating with Other Frameworks