Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Vue.js 2 Cookbook

By : Passaglia

5 (6)

Vue.js 2 Cookbook

5 (6)

By: Passaglia

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

Getting Started with Vue.js

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

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

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

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

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

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

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

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

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

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

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 (6)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "I'm going to update the ChasePlayerComponent class that already exists in the EngineTest project."

A block of code is set as follows:

new Vue({ 
  el: '#app', 
  methods: { 
    vueSubmit() { 
      console.info('fake AJAX request') 
    } 
  } 
})

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

data: { 
 userId: 1, 
 title: '', 
 body: '', 
 response: '...' 
}

Any command-line input or output is written as follows:

npm install axios

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Open Webstorm and create a new Empty Project"

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Search

Your notes and bookmarks