Vue.js in Action
Erik Hanchett with Benjamin Listwon
  • MEAP began June 2017
  • Publication in September 2018 (estimated)
  • ISBN 9781617294624
  • 304 pages (estimated)
  • printed in black & white

If you're curious about Vue.js, or wanting to look at another framework other than React or Angular, this is a good book to get started on.

Chris Coppenbarger

Web pages are rich with data and graphics, and it's challenging to maintain a smooth, quick user experience. Vue.js in Action teaches you to build fast, flowing web UI with the Vue.js framework. This practical book starts with a mental model of the reactive UI pattern and an overview of Vue.js. Then, by exploring hands-on examples, you'll learn how to interact directly with the DOM, work with events, loops, and build the View and ViewModel. You'll also learn how to extend your Vue.js app, add transitions, test for bugs, and more. As you move through the book, you'll put your skills to practice by building a complete web store application with product listings, a checkout process, and an administrative interface!

Table of Contents detailed table of contents

?= contents Eric Hanchett with Benjamin Listwon Hanchett / Vue.js in Action :doctype: book

Part 1: Getting To Know Vue.js

1. Introducing Vue.js

1.1. On the shoulders of giants

1.1.1. The model-view-controller pattern

1.1.2. The model-view-view-model pattern

1.1.3. What is a reactive application?

1.1.4. A JavaScript calculator

1.1.5. A Vue calculator

1.1.6. Comparison of JavaScript and Vue

1.1.7. How does Vue facilitate MVVM and reactivity?

1.2. Why Vue.js?

1.3. Future thoughts

1.4. Summary

2. The Vue instance

2.1. Our first application

2.1.1. The root Vue instance

2.1.2. Making sure our application is running

2.1.3. Displaying something inside our view

2.1.4. Inspecting properties in Vue

2.2. The Vue lifecycle

2.2.1. Adding lifecycle hooks

2.2.2. Exploring the lifecycle code

2.2.3. Keeping the lifecycle code, or not

2.3. Displaying a product

2.3.1. Defining product data

2.3.2. Marking up the product view

2.4. Applying output filters

2.4.1. Write the filter function

2.4.2. Add the filter to our markup and testing different values

2.5. Exercise

2.6. Solution

2.7. Summary

Part 2: The View And ViewModel

1. Adding interactivity

1.1. Shopping cart data adding an array

1.2. Binding to DOM events

1.2.1. Event binding basics

1.2.2. Bind an event to the ?Add to cart? button

1.3. Adding a cart item button and count

1.3.1. When to use a computed property

1.3.2. Examining update events with computed properties

1.3.3. Displaying a cart item count and testing

1.4. Adding user affordance to our button

1.4.1. Keeping an eye on inventory

1.4.2. Working with computed properties and inventory

1.4.3. v-show directive basics

1.4.4. Using v-if and v-else to display a disabled button

1.4.5. Adding the cart item button as a toggle

1.4.6. Using v-if to display a checkout page

1.4.7. Comparing v-show with v-if/v-else

1.5. Exercise

1.6. Solution

1.7. Summary

2. Forms and inputs

2.1. Using v-model binding

2.2. A look at value binding

2.2.1. Binding values to our check box

2.2.2. Working with value bindings and radio buttons

2.2.3. Learning the v-for directive

2.2.4. The v-for directive without the optional key

2.3. Learning modifiers with the application

2.3.1. Using the .number modifier

2.3.2. Trimming the input values

2.3.3. The .lazy v-model modifier

2.4. Exercise

2.5. Solution

2.6. Summary

3. Conditionals, looping, and lists

3.1. Show an available inventory message

3.1.1. Adding how many are left with v-if

3.1.2. Adding more messaging with v-else and v-else-if

3.2. Looping our products

3.2.1. Adding a star rating with v-for range

3.2.2. Binding an HTML class to our star rating

3.2.3. Setting up our products

3.2.4. Importing products from product.json

3.2.5. Refactoring our app with the v-for directive

3.3. Sorting Records

3.4. Exercise

3.5. Solution

3.6. Summary

4. Working with components

4.1. What are components?

4.2. Creating components

4.2.1. Global registration

4.2.2. Local registration

4.3. Relationships in components

4.4. Using props to pass data

4.4.1. Literal props

4.4.2. Dynamic props

4.4.3. Prop validation

4.5. Defining a template component

4.5.1. Using inline template strings

4.5.2. Text/x-template script elements

4.5.3. Using single file components

4.6. Working with custom events

4.6.1. Listening to events

4.6.2. Modifying child props using .sync

4.7. Exercise

4.8. Solution

4.9. Summary

5. Advanced components and routing

5.1. Working with slots

5.2. A look at named slots

5.3. Scoped Slots

5.4. Creating a dynamic components app

5.5. Setting up async components

5.6. Converting the pet store app using vue-cli

5.6.1. Creating a new application with vue-cli

5.6.2. Setting up our routes

5.6.3. Adding CSS, Bootstrap and Axios to our application

5.6.4. Setting up our components

5.6.5. Creating the Form component

5.6.6. Adding the Main component

5.7. Routing

5.7.1. Adding a product route with parameters

5.7.4. Adding a child edit route

5.7.5. Using redirection and wildcards

5.8. Exercise

5.9. Solution

5.10. Summary

6. Transitions and animations

6.1. Transitions basics

6.2. Animations basics

6.3. JavaScript hooks

6.4. Transitioning components

6.5. Updating the pet store application

6.5.1. Adding a transition to the pet store application

6.5.2. Adding an animation to the pet store application

6.6. Exercise

6.7. Solution

6.8. Summary

7. Extending Vue

7.1. Reusing functionality with mixins

7.1.1. Global mixins

7.2. Learning custom directives with examples

7.2.1. Global custom directives with modifiers, values, and args

7.3. Render functions and JSX

7.3.1. Render function example

7.3.2. JSX example

7.4. Exercise

7.5. Solution

7.6. Summary

Part 3: Modeling Data And Consuming APIs

1. Vuex

1.1. Vuex, what is it good for

1.2. Vuex state and mutations

1.3. Getters and actions

1.4. Adding Vuex to Vue CLI with the pet store app

1.4.1. Vuex installation in Vue CLI

1.5. Vuex helpers

1.6. A quick look at modules

1.7. Exercise

1.8. Solution

1.9. Summary

2. Communicating with a server

2.1. Server-side rendering

2.2. What is Nuxt.js

2.2.1. Creating a music search app

2.2.2. Creating a new project and installing dependencies

2.2.3. Creating our building blocks, components

2.2.4. Updating the default layout

2.2.5. Adding a store using Vuex

2.2.6. Using middleware

2.2.7. Generating routes using Nuxt.js

2.3. Communicating with a server using Firebase and Vuexfire

2.3.1. Setting up Firebase

2.3.2. Setting up our pet store app with Firebase

2.3.3. Updating Vuex with authentication state

2.3.4. Updating the header component with authentication

2.3.5. Updating Main.vue to use Firebase Realtime database

2.4. Exercise

2.5. Solution

2.6. Summary

3. Testing

3.1. Creating test cases

3.2. Continuous integration, delivery, and deployment

3.2.1. Continuous integration

3.2.2. Continuous delivery

3.2.3. Continuous deployment

3.3. Types of tests

3.4. Setting up our environment

3.5. Creating our first test case with vue-test-utils

3.6. Testing components

3.6.1. Testing props

3.6.2. Testing text

3.6.3. Testing CSS classes

3.6.4. Testing with a mocked Vuex

3.7. Setting up the Chrome debugger

3.8. Exercise

3.9. Solution

3.10. Summary


Appendix A: Setting up our environment

A.1. Chrome Developer Tools

A.2. vue-devtools for Chrome

A.3. Obtaining a chapter's companion code

A.4. Installing Node.js and npm

A.4.1. Installing Node.js using one-click installers

A.4.2. Install Node.js using NVM

A.4.3. Install Node.js via Linux package management system

A.4.4. Install Node.js using MacPorts or Homebrew

A.4.5. Verifying that node is installed

A.5. Installing Vue-CLI

About the Technology

Vue.js is a front-end framework that builds on many of the reactive UI ideas introduced in React.js. As a second-generation reactive UI framework, Vue was designed from the ground up with developer usability in mind. It's far more intuitive than React, featuring a clean event lifecycle, easy two-way data binding, and a common-sense project structure. By interacting directly with the DOM and not having to script all user interactions, anyone with basic HTML, JavaScript, and CSS skills can build fast interactive UIs. Compared to Angular and React, Vue is faster, and its lightweight design requires a smaller footprint.

What's inside

  • Adding View and ViewModel interactivity
  • Working with components
  • Extending Vue.js with custom plugins and directives
  • Modeling data and consuming APIs

About the reader

Written for web developers with beginning to intermediate in JavaScript, HTML, and CSS.

About the authors

Erik Hanchett is a software developer who loves all things JavaScript. Benjamin Listwon is an experienced designer and developer living in Seattle.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Vue.js in Action (combo) added to cart
continue shopping
go to cart

MEAP combo $44.99 pBook + eBook + liveBook
Vue.js in Action (eBook) added to cart
continue shopping
go to cart

MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

Easy to read and focus on what needs to be covered in a tech book. Recommended.

Vittorio Marino

There is a lot of excellent information presented.

Jay Kelkar