Book Image

Vue.js 2 Cookbook

By : Andrea Passaglia
Book Image

Vue.js 2 Cookbook

By: Andrea 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.

Related Content you might be interested in

Current Title:

Small book image
Vue.js 2 Cookbook
Andrea Passaglia
Apr, 2017 | 454 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Small book image
Vue.js 2 Web Development Projects
CHAU GUILLAUME
Nov, 2017 | 398 pages
Table of Contents (19 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Dedication
Dedication
Preface
Preface
Free Chapter
1
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
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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

Chapter 4. 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
Previous Section
End of Section 1
Next Section