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

Displaying and hiding an element conditionally

Displaying and hiding an element on a web page is fundamental to some designs. You could have a popup, a set of elements that you want to display one at a time, or something that shows only when you click on a button.

In this recipe, we will use conditional display and learn about the important v-if and v-show directives.

Getting ready

Before venturing into this recipe, ensure that you know enough about computed properties or take a look at the Filtering a list with a computed property recipe.

How to do it...

Let's build a ghost that is only visible at night:

<div id="ghost"> 
  <div v-show="isNight"> 
    I'm a ghost! Boo! 
  </div> 
</div>

The v-show guarantees that the <div> ghost will be displayed only when isNight is true. For example, we may write as follows:

new Vue({ 
  el: '#ghost', 
  data: { 
    isNight: true 
  } 
})

This will make the ghost visible. To make the example more real, we can write isNight as a computed...

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

Displaying and hiding an element conditionally

Getting ready

How to do it...