Table of Contents for

Vue.js in Action

List of Figures

Chapter 1. Introducing Vue.js

Figure 1.1. The roles of the model, view, and controller as described by the MVC pattern.

Figure 1.2. The components of the Model–View–ViewModel pattern.

Figure 1.3. Side-by-side comparison of a reactive calculator written using vanilla JavaScript (on the left) and Vue (on the right).

Figure 1.4. A typical Vue instance binds HTML markup to data in a view-model by creating a data binding between them.

Chapter 2. The Vue instance

Figure 2.1. A preview of our humble webstore’s beginnings.

Figure 2.2. The JavaScript console with no errors or warnings.

Figure 2.3. Using the webstore variable to display a representation of the Vue instance and explore its properties.

Figure 2.4. The vue-devtools window with nothing selected.

Figure 2.5. The root instance selected in vue-devtools with a variable dynamically assigned to the instance.

Figure 2.6. Our sitename property displayed in the header of our webstore.

Figure 2.7. Using the console and vue-devtools, we can check on our sitename property.

Figure 2.8. Using Vue’s property getter and setter to print and update the sitename property, respectively.

Figure 2.9. Diagram of the Vue lifecycle, divided into four phases.

Figure 2.10. Output from some of our lifecycle functions can be seen in the console.

Figure 2.11. Setting the sitename property triggers the update lifecycle callbacks.

Figure 2.12. Calling the destroy instance method triggers the final pair of lifecycle callbacks.

Figure 2.13. Our product is displayed but has a few issues we need to clean up.

Figure 2.14. Using the v-html binding allows us to display the description as raw HTML.

Figure 2.15. Our price formatter adds a dollar sign and the appropriate punctuation to the display of our price property’s value.

Figure 2.16. Updating the product price triggers our lifecycle events (if you still have them enabled), as well as an update to the price, which is now run through our filter function.

Chapter 3. Adding interactivity

Figure 3.1. Our product listing with new elements: a shopping cart and an Add to cart button.

Figure 3.2. The syntax of an event binding.

Figure 3.3. An empty array is what we should see before any products are added. If it’s not empty, go ahead and reload the page.

Figure 3.4. The array fills up as you add items to the cart.

Figure 3.5. Combining the user’s first and last name from a dataset into a full name for display.

Figure 3.6. Changes in an instance’s data trigger a cascade of activity within the update cycle of an application.

Figure 3.7. The initial state of our area calculating application.

Figure 3.8. Observing our properties changing in response to clicking buttons.

Figure 3.9. Changes in an instance’s data trigger a cascade of activity within the update cycle of an application.

Figure 3.10. No update message displays if nothing gets updated.

Figure 3.11. Observing change in our application’s header and inspecting the cart in the console.

Figure 3.12. The Add to cart button is hidden when we exhaust the available inventory.

Figure 3.13. Diagram explaining how the v-if directive conditional works.

Figure 3.14. Using v-if and v-else means we can render a disabled button, rather than making it disappear entirely when the inventory is exhausted.

Figure 3.15. View of webstore after checkout button is pressed. Pressing the checkout button again shows the product page.

Chapter 4. Forms and inputs

Figure 4.1. The model updates the view while the view updates the model.

Figure 4.2. Up close with the v-model directive

Figure 4.3. Text is updated in real time into the box at the bottom.

Figure 4.4. Adding the address, city, state, and ZIP Code form fields into our checkout page.

Figure 4.5. This popup was triggered by the submitForm function.

Figure 4.6. Completed checkout page with all form elements included.

Figure 4.7. The {{order.gift}} property is displayed.

Figure 4.8. Method is updated from the radio button.

Figure 4.9. State text property is displaying the correct state selected.

Figure 4.10. Type of value entered into the zip property.

Figure 4.11. An example of using the .trim modifier on the v-model directive.

Chapter 5. Conditionals, looping, and lists

Figure 5.1. Product page with only four items left, the result of using the v-if directive.

Figure 5.2. Product page shows All Out! after the inventory is exhausted.

Figure 5.3. Shows the Buy Now! screen

Figure 5.4. Diagram showing how v-for alias works.

Figure 5.5. Diagram showing how v-for ranges works.

Figure 5.6. With star rating

Figure 5.7. With filled-in star rating for the cat food product

Figure 5.8. Final update of products.

Figure 5.9. Showing several items that are being looped through the product.json file

Figure 5.10. Sorted products array

Chapter 6. Working with components

Figure 6.1. Example of encapsulating code into a component

Figure 6.2. A parent component can send data to a child component.

Figure 6.3. Error in console warns against mutating props directly.

Figure 6.4. Dynamic props example in a browser.

Figure 6.5. Dynamic props with a local scope counter example.

Figure 6.6. Validation number, string, and object using prop validation.

Figure 6.7. Error showing validation failure.

Figure 6.8. Shows two buttons; both increment the counter from the parent.

Figure 6.9. This example uses .sync to modify the counter.

Chapter 7. Advanced components and routing

Figure 7.1. Information inside component tags will be discarded.

Figure 7.2. Book form page example.

Figure 7.3. List of books and authors in the book list.

Figure 7.4. Dynamic book component cycle that displays each component after clicking the Cycle button.

Figure 7.5. Async component rendered after 1 second onscreen.

Figure 7.6. Default welcome screen for Vue-CLI

Figure 7.7. Pet store application opened with Vue-CLI.

Figure 7.8. Dynamic segment for product 1001.

Figure 7.9. Checkout button updated with new style.

Figure 7.10. The child Edit route of a product.

Chapter 8. Transitions and animations

Figure 8.1. Toggle without any transition

Figure 8.2. Classes when element is being added to the DOM

Figure 8.3. Classes shown when the element is removed from the DOM.

Figure 8.4. Screenshot of transition

Figure 8.5. Hooks triggered after clicking title

Figure 8.6. Hooks triggered when element is removed from the DOM.

Figure 8.7. In-between transition of components

Figure 8.8. Page transitioning to the checkout page

Figure 8.9. All Out! animation. The text moves left and right.

Chapter 9. Extending Vue

Figure 9.1. Mixin example with multiple components

Figure 9.2. The image from figure 9.1 after clicking Press Button 1

Figure 9.3. Hello World text added using a custom directive.

Figure 9.4. Using global directives with the binding argument

Figure 9.5. An example of using the render function

Figure 9.6. The alert box created using the render function after clicking the message.

Chapter 10. Vuex

Figure 10.1. Simple example of using props and an event bus

Figure 10.2. How a central store is used with Vuex

Figure 10.3. Creating a simple app using Vuex

Figure 10.4. Hello World app using setters and actions

Figure 10.5. Showing the completed pet store application

Figure 10.6. Folder structure for modules

Chapter 11. Communicating with a server

Figure 11.1. Client-side rendering

Figure 11.2. Server-side rendering

Figure 11.3. Nuxt.js starter template page

Figure 11.4. Search page for the iTunes API

Figure 11.5. Search results page

Figure 11.6. iTunes search ToolBar.vue

Figure 11.7. Card.vue component with example text

Figure 11.8. Directory structure to create routes

Figure 11.9. Directory structure of iTunes search app

Figure 11.10. Completed pet store application using Firebase

Figure 11.11. Creating a Firebase project

Figure 11.12. Database selection

Figure 11.13. Firebase Realtime Database setup

Figure 11.14. Setting up authentication

Figure 11.15. Enable Google sign-in.

Figure 11.16. User is signed in.

Figure 11.17. User is signed out.

Chapter 12. Testing

Figure 12.1. Pet depot checkout page that displays Ordered at the bottom

Figure 12.2. Checking our first test case, which is successful

Figure 12.3. The test case fails

Figure 12.4. All tests are passing

Figure 12.5. Chrome Devices page

Figure 12.6. Chrome Inspect window

Figure 12.7. Debugger statement showing all the wrapper methods.

Appendix A. Setting up your environment

Figure A.1. The default view of Chrome’s Developer Tools pane shows the HTML markup of a web page, and the CSS styles attached to a selected element.

Figure A.2. The JavaScript console lets us inspect and interact with HTML markup as well as the JavaScript of our Vue application.

Figure A.3. Enabling vue-devtools to work with local files requires updating settings in the Extensions preference page.

Figure A.4. The vue-devtools extension lets us explore our Vue applications in real time.

Figure A.5. The homepage to download Node