Vue.js 2 Cookbook

101 hands-on recipes that teach you how to build professional, structured web apps with Vue.js

Vue.js 2 Cookbook

Andrea Passaglia

3 customer reviews
101 hands-on recipes that teach you how to build professional, structured web apps with Vue.js
Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781786468093
Paperback454 pages

Book Description

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.

Table of Contents

Chapter 1: 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
Chapter 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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

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 applications

Authors

Table of Contents

Chapter 1: 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
Chapter 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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

Book Details

ISBN 139781786468093
Paperback454 pages
Read More
From 3 reviews

Read More Reviews