Vue.js 2.x by Example: Example-driven guide to build web apps with Vue.js for beginners

✍ Scribed by Mike Street

• Publisher: Packt Publishing Ltd
• Year: 2017
• Tongue: English
• Leaves: 405
• Category: Library

✦ Synopsis

Learn the fundamentals of vue.js by creating complex SPAs with Vuex, vue-router and more

Key Features

• We bridge the gap between "learning" and "doing" by providing real-world examples that will improve your web development skills with Vue.js
• Explore the exciting features of Vue.js 2 through practical and interesting examples
• Explore modern development tools and learn how to utilize them by building applications with Vue.js

Book Description

Vue.js is a frontend web framework which makes it easy to do just about anything, from displaying data up to creating full-blown web apps, and has become a leading tool for web developers. This book puts Vue.js into a real-world context, guiding you through example projects that helps you build Vue.js applications from scratch.

With this book, you will learn how to use Vue.js by creating three Single Page web applications. Throughout this book, we will cover the usage of Vue, for building web interfaces, Vuex, an official Vue plugin which makes caching and storing data easier, and Vue-router, a plugin for creating routes and URLs for your application.

Starting with a JSON dataset, the first part of the book covers Vue objects and how to utilize each one. This will be covered by exploring different ways of displaying data from a JSON dataset. We will then move on to manipulating the data with filters and search and creating dynamic values.

Next, you will see how easy it is to integrate remote data into an application by learning how to use the Dropbox API to display your Dropbox contents in an application

In the final section, you will see how to build a product catalog and dynamic shopping cart using the Vue-router, giving you the building blocks of an e-commerce store.

What you will learn

• Looping through data with Vue.js
• Searching and filtering data
• Using components to display data
• Getting a list of files using the dropbox API
• Navigating through a file tree and loading folders from a URL
• Caching with Vuex
• Pre-caching for faster navigation
• Introducing vue-router and loading components
• Using vue-router dynamic routes to load data
• Using vue-router and Vuex to create an ecommerce store

Who this book is for

This book is for developers who know the basics of JavaScript and are looking to learn Vue.js with real examples. You should understand the basics of JavaScript functions and variables and be comfortable with using CSS or a CSS framework for styling your projects.

✦ Table of Contents

Cover
Copyright
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Customer Feedback
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 an "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
Index