Complete Vue.js 2 Web Development: Practical guide to building end-to-end web development solutions with Vue.js 2

Description

Cover Title Page Copyright About Packt Contributors 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 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 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 Reducing the number of hard-coded variables and properties, and reducing redundancy 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 Making the filters a component Creating the component Resolving JavaScript errors Using custom events to change the filter field Updating the filter query Summary 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 Chapter 5: Navigating through the File Tree and Loading Folders from the URL 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 Updating the structure with a URL change and setting Vue data outside of the instance 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 Chapter 8: Introducing Vue-Router and Loading URL-Based Components Installing and initializing Vue-router Changing the folder for Vue-router Linking to the different routes Linking to sub-routes Dynamic routes with parameters 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 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 Updating the product details when switching URLs Summary 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 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 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 Chapter 13: Transitions and Animations Introduction Integrating with third-party CSS animation libraries such as animate.css 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 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 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… 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 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... Using only one command to build both a minified and a development .js file Getting ready How to do it… How it works... Releasing your components to the public Getting ready How to do it... How it works... Chapter 17: Advanced Vue.js - Directives, Plugins, and Render Functions 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 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 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 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 Other Books You May Enjoy Index