Vue.js 2.x by Example

Table of contents

1. Preface
   1. What this book covers
   2. What you need for this book
   3. Who this book is for
   4. Conventions
   5. Reader feedback
   6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book 
      3. Errata
      4. Piracy
      5. Questions
2. Getting Started with Vue.js
   1. Creating the workspace
      1. Application space
      2. Vue library
   2. Initializing Vue and displaying the first message
   3. Computed values
   4. Methods and reusable functions
   5. Summary
3. Displaying, Looping, Searching, and Filtering Data
   1. HTML declarations 
      1. v-html
      2. Declarative rendering
   2. Conditional rendering
      1. v-if
      2. v-else
   3. v-for and displaying our data
      1. Creating links using v-html
      2. Format balance
      3. Format registered date
   4. Filtering our data
      1. Building the form
      2. Binding the inputs
   5. Showing and hiding Vue content
      1. Filtering our content
      2. Filtering our filters
   6. Changing CSS classes
   7. Filtering and custom classes
   8. Summary
4. Optimizing your App and Using Components to Display Data
   1. Optimizing the code
      1. Reducing the number of filter variables and grouping logically
      2. Combining the format functions
         1. Autodetection formatting
         2. Passing in a second variable
      3. Creating the method
      4. Reducing the number of hard-coded variables and properties, and reducing redundancy
   2. Creating Vue components
      1. Creating and initializing your component
      2. Using your component
   3. Using component data and methods
   4. Passing data to your component – props
   5. Passing data to your component – slots
   6. Creating a repeatable component
      1. Creating component methods and computed functions
         1. CSS class functions
         2. Formatted value functions
      2. Making the filtering work again with props
   7. Making the filters a component
      1. Creating the component
      2. Resolving JavaScript errors
      3. Using custom events to change the filter field
      4. Updating the filter query
   8. Summary
5. Getting a List of Files Using the Dropbox API
   1. Getting started—loading the libraries
   2. Creating a Dropbox app and initializing the SDK
   3. Displaying your data and using Vue to get it
      1. Create the component
      2. Retrieve the Dropbox data
      3. The Vue life cycle hooks
      4. Displaying the Dropbox data
      5. More file meta information
      6. Formatting the file sizes
   4. Adding a loading screen
   5. Animating between states
   6. Summary
6. Navigating through the File Tree and Loading Folders from the URL
   1. Separating out files and folders
   2. Making file and folder components
   3. Linking folders and updating the structure
   4. Creating a breadcrumb from the current path
   5. Adding the ability to download files
   6. Updating the URL hash and using it to navigate through the folders
      1. Showing the folder based on the URL
      2. Displaying an error message 
      3. Using the back and forward buttons in your browser
         1. Removing unneeded code
         2. Updating the structure with a URL change and setting Vue data outside of the instance
   7. Final Code
   8. Summary
7. Caching the Current Folder Structure Using Vuex
   1. Including and initializing Vuex
   2. Utilizing the store
      1. Retrieving the message
      2. Updating the message
   3. Using the Vuex store for the folder path
      1. Updating the path methods to use store commits
      2. Using the path variable
         1. Updating the breadcrumb component
         2. Updating the dropbox-viewer component to work with Vuex
   4. Caching the folder contents
   5. Loading data from the store if it exists
      1. Loading the data from the store
      2. Only storing new data
   6. Summary
8. Pre-Caching Other Folders and Files for Faster Navigation
   1. Caching subfolders
      1. Planning app methods
      2. Creating the getFolderStructure method
      3. Showing the data with the displayFolderStructure method
         1. Set the loading state to true and create an empty structure object
         2. Load the contents of the getFolderStructure method
         3. Loop through the result and add each item to either the folders or files array
         4. Update the global structure object and remove the loading state
         5. Instigating the method
      4. Caching the subfolders
         1. Alternative caching method
   2. Caching parent folders
      1. Caching parent folders once
   3. Caching download links on files
   4. The complete code—with added documentation
   5. Summary
9. Introducing Vue-Router and Loading URL-Based Components
   1. Installing and initializing Vue-router
   2. Changing the folder for Vue-router
   3. Linking to the different routes
   4. Linking to sub-routes
   5. Dynamic routes with parameters
      1. GET parameters
      2. Using props
         1. Setting prop defaults
         2. Using static props
   6. Nested routes
   7. Creating a 404 page
   8. Naming components, routes, and views
      1. Naming components
      2. Naming routes
      3. Named views
   9. Programmatically navigating with, redirecting, and adding an alias
      1. Navigating programmatically
      2. Redirecting
      3. Alias routes
   10. Summary
10. Using Vue-Router Dynamic Routes to Load Data
    1. Outline and plan your app
       1. Components
          1. Route components
          2. HTML components
       2. Paths
    2. Create initial files
    3. Server setup
       1. Storing the file locally
       2. Using a remote server
       3. Setting up local server
    4. Loading CSV
       1. Loading a CSV with d3
       2. Loading a CSV with CSV Parser
       3. Unifying Shopify CSV data
       4. Storing the products
    5. Displaying a single product
       1. Page Not Found
       2. Selecting the right product
       3. Catching products not found
    6. Displaying product information
       1. Product images
    7. Product variations
       1. Variations display table
          1. Using a key with loops
          2. Displaying the variations in a table
       2. Displaying variations in a select box
    8. Updating the product details when switching URLs
    9. Summary
11. Building an E-Commerce Store – Browsing Products
    1. Listing the products
       1. Adding a new route
       2. Looping through products
    2. Creating pagination
       1. Calculating the values
       2. Displaying a paginated list
       3. Creating paginating buttons
       4. Updating the URL on navigation
       5. Creating pagination links
       6. Updating the items per page
    3. Creating the ListProducts component
    4. Creating a curated list for the home page
    5. Showing more information
    6. Creating categories
       1. Creating a category list
       2. Creating an "miscellaneous" category
    7. Displaying the categories
    8. Displaying products in a category
       1. Code optimization
    9. Ordering products in a category
       1. Store the product price
       2. Wiring up the ordering
    10. Creating Vuex getters
    11. Building the filtering component based on products
        1. Dynamically creating filters
        2. Resetting filters
    12. Updating the URL on checkbox filter change
        1. Preselecting filters on page load
    13. Filtering the products
    14. Summary
12. Building an E-Commerce Store – Adding a Checkout
    1. Creating the basket array placeholder
    2. Adding product information to the store
       1. Creating the store mutation to add products to the basket
    3. Updating the Add to basket button when adding an item
    4. Showing the product count in the header of the app
       1. Calculating the basket quantity
    5. Finalizing the Shop Vue-router URLs
    6. Building the Order process and ListProducts component
       1. Order Confirmation screen
       2. Using Vue filters to format the price
       3. Calculating a total price
    7. Creating an Order Checkout page
       1. Copying details between addresses
    8. Creating an editable basket
       1. Creating editable fields
       2. Removing items from your cart
    9. Completing the shop SPA
    10. Summary
13. Using Vue Dev Tools and Testing Your SPA
    1. Using the Vue.js developer tools
       1. Inspecting Vue components data and computed values
       2. Viewing Vuex mutations and time-travel
       3. Previewing event data
    2. Testing your SPA
       1. Command-line unit testing
       2. Browser automation
    3. Summary