Vue.js 2 Cookbook

Vue.js 2 Cookbook

By : Andrea Passaglia

Buy this Book

Vue.js 2 Cookbook

By: Andrea Passaglia

Buy this Book

Overview of this book

Vue.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.

Title Page

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Dedication

Preface

Free Chapter

Getting Started with Vue.js

Introduction

Writing Hello World with Vue.js

Writing lists

Creating a dynamic and animated list

Reacting to events such as clicks and keystrokes

Choosing a development environment

Formatting your text with filters

Debugging your application with mustaches (for example, a JSON filter)

X-raying your application with Vue developer tools

Upgrading to Vue.js 2

Basic Vue.js Features

Introduction

Learning how to use computed properties

Filtering a list with a computed property

Sorting a list with a computed property

Formatting currencies with filters

Formatting dates with filters

Displaying and hiding an element conditionally

Adding styles conditionally

Adding some fun to your app with CSS transitions

Outputting raw HTML

Creating a form with checkboxes

Creating a form with radio buttons

Creating a form with a select element

Transitions and Animations

Introduction

Integrating with third-party CSS animation libraries such as animate.css

Adding your own transition classes

Animating with JavaScript instead of CSS

Transitioning on the initial render

Transitioning between elements

Letting an element leave before the enter phase in a transition

Adding entering and leaving transitions for elements of a list

Transitioning elements that move in a list

Animating the state of your components

Packaging reusable transitions into components

Dynamic transitions

All About Components

Introduction

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

Vue Communicates with the Internet

Introduction

Sending basic AJAX requests with Axios

Validating user data before sending it

Creating a form and sending data to your server

Recovering from an error during a request

Creating a REST client (and server!)

Implementing infinite scrolling

Processing a request before sending it out

Preventing XSS attacks to your app

Single Page Applications

Introduction

Creating an SPA with vue-router

Fetching data before switching route

Using named dynamic routes

Having more than one router-view in your page

Compose your routes hierarchically

Using route aliases

Adding transitions between your routes

Managing errors for your routes

Adding a progress bar to load pages

How to redirect to another route

Saving scrolling position when hitting back

Unit Testing and End-to-End Testing

Introduction

Using Jasmine for testing Vue

Adding some Karma to your workflow

Testing your application state and methods

Testing the DOM

Testing DOM asynchronous updates

End-to-end testing with nightwatch

Simulating a double-click in nightwatch

Different styles of unit testing

Stubbing external API calls with Sinon.JS

Measuring the coverage of your code

Organize + Automate + Deploy = Webpack

Introduction

Extracting logic from your components to keep the code tidy

Bundling your component with Webpack

Organizing your dependencies with Webpack

Using external components in your Webpack project

Developing with continuous feedback with hot reloading

Using Babel to compile from ES6

Running a code linter while developing

Using only one command to build both a minified and a development .js file

Releasing your components to the public

Advanced Vue.js – Directives, Plugins, and Render Functions

Introduction

Creating a new directive

Using WebSockets in Vue

Writing a plugin for Vue

Rendering a simple component manually

Rendering a component with children

Using JSX to render a component

Creating a functional component

Building a responsive table with higher-order components

Large Application Patterns with Vuex

Introduction

Dynamically loading pages in your vue-router

Building a simple storage for the application state

Understanding Vuex mutations

Listing your actions in Vuex

Separating concerns with modules

Building getters to help retrieve your data

Testing your store

Integrating with Other Frameworks

Introduction

Building universal applications with Electron

Using Vue with Firebase

Creating a real-time app with Feathers

Creating a reactive app with Horizon

Customer Reviews

5 star

4 star

3 star

2 star

1 star

X-raying your application with Vue developer tools

Using mustaches is a quick way to display the content of an object. However it has some limitations; one of them outlined in the previous recipe is that, out of the box, it breaks when dealing with objects that contain circular references. A tool that doesn't present this limitation when inspecting internal variables and that sports many more debugging features is Vue developer tools. There's a Chrome extension that will help you at every step of development, visualizing the state of your components, where they are in the page, and more. It's also deeply integrated with Vuex (covered in later recipes) and has a time machine feature that lets you rewind the event flow directly from the browser.

Getting Ready

To install it, you just have to download the extension from the Chrome Web Store in the extensions category. Just look for Vue.js devtools and you'll find it right away, press the ADD TO CHROME button, and you're set to go:

Unfortunately you won't be able to use it in some configurations; particularly it currently doesn't seem to work in iframe environments and JSFiddle is one of them, so to see it you have to at least use the one page approach outlined in the Choosing a development environment recipe. .

How to do it...

Access the Developer Tools of Chrome (Usually with cmd + opt + I or Ctrl + Shift + I) and you will see a new tab at the end that says Vue. Clicking it will bring forth the developer tools.

Note

To make it work for pages opened via the file:// protocol, you need to check Allow access to file URLs for this extension in Chrome's extension management panel.

You will be presented with a hierarchical tree of components laid out in your page and by selecting them you will be able to see all the variables in depth and in real time.

Click on the various objects in the three to see details:

Also, you will see a useful button: the inspect DOM button (the eye) will scroll the page to where the element is and will show you the DOM representation in the Chrome developer tools. Furthermore, when you click on a component (root in the illustration) you will have a variable like $vm0 available to be used in the console. For example, you can execute methods or inspect variables.

Click on the root component and write the following in the console to explore the $vm0.docsUrl property:

Vue.js 2 Cookbook

By : Andrea Passaglia

Vue.js 2 Cookbook

By: Andrea Passaglia

Overview of this book

Related Content you might be interested in

Current Title:

Vue.js 2 Cookbook

Vue.js Quick Start Guide

Vue.js 2 Design Patterns and Best Practices

Vue.js 2 Web Development Projects

X-raying your application with Vue developer tools

Getting Ready

How to do it...

Note