Table of Contents
- Preface
- Chapter 1: Getting Started with Vue.js
- Creating the workspace
- Application space
- Vue library
- Initializing Vue and displaying the first message
- Computed values
- Methods and reusable functions
- Summary
- Creating the workspace
- Chapter 2: Displaying, Looping, Searching, and Filtering Data
- HTML declarations
- v-html
- Declarative rendering
- Conditional rendering
- v-if
- v-else
- v-for and displaying our data
- Creating links using v-html
- Format balance
- Format registered date
- Filtering our data
- Building the form
- Binding the inputs
- Showing and hiding Vue content
- Filtering our content
- Filtering our filters
- Changing CSS classes
- Filtering and custom classes
- Summary
- HTML declarations
- Chapter 3: Optimizing your App and Using Components to Display Data
- Optimizing the code
- Reducing the number of filter variables and grouping logically
- Combining the format functions
- Autodetection formatting
- Passing in a second variable
- Creating the method
- redundancy Reducing the number of hard-coded variables and properties, and reducing
- Creating Vue components
- Creating and initializing your component
- Using your component
- Using component data and methods
- Passing data to your component – props
- Passing data to your component – slots
- Creating a repeatable component
- Creating component methods and computed functions
- CSS class functions
- Formatted value functions
- Making the filtering work again with props
- Creating component methods and computed functions
- Making the filters a component
- Creating the component
- Resolving JavaScript errors
- Using custom events to change the filter field
- Updating the filter query
- Summary
- Optimizing the code
- Chapter 4: Getting a List of Files Using the Dropbox API
- Getting started—loading the libraries
- Creating a Dropbox app and initializing the SDK
- Displaying your data and using Vue to get it
- Create the component
- Retrieve the Dropbox data
- The Vue life cycle hooks
- Displaying the Dropbox data
- More file meta information
- Formatting the file sizes
- Adding a loading screen
- Animating between states
- Summary
- the URL Chapter 5: Navigating through the File Tree and Loading Folders from
- Separating out files and folders
- Making file and folder components
- Linking folders and updating the structure
- Creating a breadcrumb from the current path
- Adding the ability to download files
- Updating the URL hash and using it to navigate through the folders
- Showing the folder based on the URL
- Displaying an error message
- Using the back and forward buttons in your browser
- Removing unneeded code [ iii ]
- instance Updating the structure with a URL change and setting Vue data outside of the
- Final Code
- Summary
- Chapter 6: Caching the Current Folder Structure Using Vuex
- Including and initializing Vuex
- Utilizing the store
- Retrieving the message
- Updating the message
- Using the Vuex store for the folder path
- Updating the path methods to use store commits
- Using the path variable
- Updating the breadcrumb component
- Updating the dropbox-viewer component to work with Vuex
- Caching the folder contents
- Loading data from the store if it exists
- Loading the data from the store
- Only storing new data
- Summary
- Chapter 7: Pre-Caching Other Folders and Files for Faster Navigation
- Caching subfolders
- Planning app methods
- Creating the getFolderStructure method
- Showing the data with the displayFolderStructure method
- Set the loading state to true and create an empty structure object
- Load the contents of the getFolderStructure method
- Loop through the result and add each item to either the folders or files array
- Update the global structure object and remove the loading state
- Instigating the method
- Caching the subfolders
- Alternative caching method
- Caching parent folders
- Caching parent folders once
- Caching download links on files
- The complete code—with added documentation
- Summary
- Caching subfolders
- Components Chapter 8: Introducing Vue-Router and Loading URL-Based
- Installing and initializing Vue-router
- Changing the folder for Vue-router
- Linking to the different routes
- Linking to sub-routes
- Dynamic routes with parameters [ iv ]
- GET parameters
- Using props
- Setting prop defaults
- Using static props
- Nested routes
- Creating a 404 page
- Naming components, routes, and views
- Naming components
- Naming routes
- Named views
- Programmatically navigating with, redirecting, and adding an alias
- Navigating programmatically
- Redirecting
- Alias routes
- Summary
- Chapter 9: Using Vue-Router Dynamic Routes to Load Data
- Outline and plan your app
- Components
- Route components
- HTML components
- Paths
- Components
- Create initial files
- Server setup
- Storing the file locally
- Using a remote server
- Setting up local server
- Loading CSV
- Loading a CSV with d3
- Loading a CSV with CSV Parser
- Unifying Shopify CSV data
- Storing the products
- Displaying a single product
- Page Not Found
- Selecting the right product
- Catching products not found
- Displaying product information
- Product images
- Product variations
- Variations display table
- Using a key with loops
- Displaying the variations in a table
- Displaying variations in a select box
- Variations display table
- Updating the product details when switching URLs
- Summary [ v ]
- Outline and plan your app
- Chapter 10: Building an E-Commerce Store - Browsing Products
- Listing the products
- Adding a new route
- Looping through products
- Creating pagination
- Calculating the values
- Displaying a paginated list
- Creating paginating buttons
- Updating the URL on navigation
- Creating pagination links
- Updating the items per page
- Creating the ListProducts component
- Creating a curated list for the home page
- Showing more information
- Creating categories
- Creating a category list
- Creating a "miscellaneous" category
- Displaying the categories
- Displaying products in a category
- Code optimization
- Ordering products in a category
- Store the product price
- Wiring up the ordering
- Creating Vuex getters
- Building the filtering component based on products
- Dynamically creating filters
- Resetting filters
- Updating the URL on checkbox filter change
- Preselecting filters on page load
- Filtering the products
- Summary
- Listing the products
- Chapter 11: Building an E-Commerce Store - Adding a Checkout
- Creating the basket array placeholder
- Adding product information to the store
- Creating the store mutation to add products to the basket
- Updating the Add to basket button when adding an item
- Showing the product count in the header of the app
- Calculating the basket quantity
- Finalizing the Shop Vue-router URLs
- Building the Order process and ListProducts component
- Order Confirmation screen
- Using Vue filters to format the price
- Calculating a total price [ vi ]
- Creating an Order Checkout page
- Copying details between addresses
- Creating an editable basket
- Creating editable fields
- Removing items from your cart
- Completing the shop SPA
- Summary
- Chapter 12: Using Vue Dev Tools and Testing Your SPA
- Using the Vue.js developer tools
- Inspecting Vue components data and computed values
- Viewing Vuex mutations and time-travel
- Previewing event data
- Testing your SPA
- Command-line unit testing
- Browser automation
- Summary
- Using the Vue.js developer tools
- Chapter 13: Transitions and Animations
- Introduction
- animate.css Integrating with third-party CSS animation libraries such as
- Getting ready
- How to do it...
- How does it work...
- Adding your own transition classes
- Getting ready
- How to do it...
- How it works...
- Animating with JavaScript instead of CSS
- Getting ready
- How to do it...
- How it works...
- There's more...
- Transitioning on the initial render
- Getting ready
- How to do it...
- How it works...
- Transitioning between elements
- Getting ready
- How to do it...
- How it works...
- There's more...
- Transitioning between more than two elements
- Setting the key attribute dynamically
- Letting an element leave before the enter phase in a transition [ vii ]
- Getting ready
- How to do it...
- The two elements problem
- Transition modes
- How it works...
- Adding entering and leaving transitions for elements of a list
- Getting ready
- How to do it...
- How it works...
- Transitioning elements that move in a list
- Getting ready
- How to do it...
- How it works...
- Animating the state of your components
- Getting ready
- How to do it...
- How it works...
- Packaging reusable transitions into components
- Getting ready
- How to do it...
- Building the basic web page
- Building the reusable transition
- Using our transition with the elements in our page
- How it works...
- Dynamic transitions
- Getting ready
- How to do it...
- How it works...
- Chapter 14: Vue Communicates with the Internet
- Introduction
- Sending basic AJAX requests with Axios
- Getting ready
- How to do it...
- How it works...
- Validating user data before sending it
- Getting ready
- How to do it...
- How it works...
- Creating a form and sending data to your server
- Getting ready
- How to do it...
- How it works...
- There's more...
- Recovering from an error during a request
- Getting ready [ viii ]
- How to do it...
- How it works...
- Creating a REST client (and server!)
- Getting ready
- How to do it...
- How it works...
- Implementing infinite scrolling
- Getting ready
- How to do it...
- How it works...
- Processing a request before sending it out
- Getting ready
- How to do it...
- How it works...
- Preventing XSS attacks to your app
- Getting ready
- How to do it...
- How it works...
- Chapter 15: Single Page Applications
- Introduction
- Creating an SPA with vue-router
- Getting ready
- How to do it...
- How it works...
- There's more...
- Fetching data before switching route
- Getting ready
- How to do it...
- How it works...
- Using named dynamic routes
- Getting ready
- How to do it...
- How it works...
- Having more than one router-view in your page
- Getting ready
- How to do it...
- How it works...
- Compose your routes hierarchically
- Getting ready
- How to do it...
- How it works...
- Using route aliases
- Getting ready
- How to do it... [ ix ]
- How it works...
- Adding transitions between your routes
- Getting ready
- How to do it...
- How it works...
- Managing errors for your routes
- Getting ready
- How to do it...
- How it works...
- Adding a progress bar to load pages
- Getting ready
- How to do it...
- How it works...
- How to redirect to another route
- Getting ready
- How to do it...
- How it works...
- There's more...
- Redirecting to 404s
- Named redirecting
- Redirecting with parameters
- Dynamic redirecting
- Saving scrolling position when hitting back
- Getting ready
- How to do it...
- How it works...
- Chapter 16: Organize + Automate + Deploy = Webpack
- Introduction
- Extracting logic from your components to keep the code tidy
- Getting ready
- How to do it...
- Creating a clean Webpack project
- Building the compound interest calculator
- How it works...
- Bundling your component with Webpack
- Getting ready
- How to do it...
- How it works...
- There's more...
- Organizing your dependencies with Webpack
- Getting ready
- How to do it...
- How it works...
- Using external components in your Webpack project
- Getting ready [ x ]
- How to do it...
- How it works...
- Developing with continuous feedback with hot reloading
- Getting ready
- How to do it...
- How it works...
- Using Babel to compile from ES6
- Getting ready
- How to do it...
- How it works...
- Running a code linter while developing
- Getting ready
- How to do it...
- How it works...
- development .js file Using only one command to build both a minified and a
- Getting ready
- How to do it...
- How it works...
- Releasing your components to the public
- Getting ready
- How to do it...
- How it works...
- Functions Chapter 17: Advanced Vue.js - Directives, Plugins, and Render
- Introduction
- Creating a new directive
- Getting ready
- How to do it...
- How it works...
- Using WebSockets in Vue
- Getting ready
- How to do it...
- How it works...
- Writing a plugin for Vue
- Getting ready
- How to do it...
- How it works...
- Rendering a simple component manually
- Getting ready
- How to do it...
- How it works...
- Rendering a component with children
- Getting ready [ xi ]
- How to do it...
- How it works...
- Using JSX to render a component
- Getting ready
- How to do it...
- How it works...
- There's more...
- Creating a functional component
- Getting ready
- How to do it...
- How it works...
- Building a responsive table with higher-order components
- Getting ready
- How to do it...
- How it works...
- Chapter 18: Large Application Patterns with Vuex
- Introduction
- Dynamically loading pages in your vue-router
- Getting ready
- How to do it...
- How it works...
- There's more...
- Building a simple storage for the application state
- Getting ready
- How to do it...
- How it works...
- Understanding Vuex mutations
- Getting ready
- How to do it...
- How it works...
- There's more...
- Listing your actions in Vuex
- Getting ready
- How to do it...
- How it works...
- Separating concerns with modules
- Getting ready
- How to do it...
- How it works...
- Building getters to help retrieve your data
- Getting ready
- How to do it...
- How it works...
- Accessing other getters [ xii ]
- Passing an argument
- Testing your store
- Getting ready
- How to do it...
- Software requirements
- Testing mutations
- Testing actions
- How it works...
- Chapter 19: Integrating with Other Frameworks
- Introduction
- Building universal applications with Electron
- Getting ready
- How to do it...
- How it works...
- Using Vue with Firebase
- Getting ready
- How to do it...
- How it works...
- Creating a real-time app with Feathers
- Getting ready
- How to do it...
- How it works...
- Creating a reactive app with Horizon
- Getting ready
- How to do it...
- How it works...
- Chapter 20: Vue Router Patterns
- Single Page Applications
- Using the router
- Creating routes
- Dynamic routes
- Route props
- Component Navigation Guards
- beforeRouteUpdate
- beforeRouteEnter
- beforeRouteLeave
- Global router hooks
- beforeEach
- beforeResolve
- afterEach
- Resolution stack
- Programmatic navigation
- router.replace
- router.go
- Lazy loading routes [ xiii ]
- An SPA project
- Enabling the router
- Defining routes
- Creating the UserList route
- Getting data from an API
- Creating a detail page
- Child routes
- Summary
- Chapter 21: State Management with Vuex
- What is Vuex?
- State Management Pattern (SMP)
- Thinking about state
- Using Vuex
- Creating a new store
- Defining action types
- Actions
- Mutations
- Getters
- Combining elements
- Payloads
- Vuex and Vue devtools
- Modules and scalability
- Summary
- What is Vuex?
- Other Books You May Enjoy
- Index