Book Image

Vue.js 2.x by Example

By : Mike Street
Book Image

Vue.js 2.x by Example

By: Mike Street

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Vue.js 2.x by Example
Mike Street
Dec, 2017 | 412 pages
Small book image
Vue.js 2 Design Patterns and Best Practices
Paul Halliday
Mar, 2018 | 344 pages
Small book image
Vue.js 2 Cookbook
Andrea Passaglia
Apr, 2017 | 454 pages
Small book image
ASP.NET Core 2 and Vue.js
Stuart Ratcliffe
Jul, 2018 | 556 pages
Table of Contents (13 chapters)
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
Getting Started with Vue.js
Getting Started with Vue.js
Creating the workspace
Initializing Vue and displaying the first message
Computed values
Methods and reusable functions
Summary
2
Displaying, Looping, Searching, and Filtering Data
Displaying, Looping, Searching, and Filtering Data
HTML declarations
Conditional rendering
v-for and displaying our data
Filtering our data
Showing and hiding Vue content
Changing CSS classes
Filtering and custom classes
Summary
3
Optimizing your App and Using Components to Display Data
Optimizing your App and Using Components to Display Data
Optimizing the code
Creating Vue components
Using component data and methods
Passing data to your component – props
Passing data to your component – slots
Creating a repeatable component
Making the filters a component
Summary
4
Getting a List of Files Using the Dropbox API
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
Adding a loading screen
Animating between states
Summary
5
Navigating through the File Tree and Loading Folders from the URL
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
Final Code
Summary
6
Caching the Current Folder Structure Using Vuex
Caching the Current Folder Structure Using Vuex
Including and initializing Vuex
Utilizing the store
Using the Vuex store for the folder path
Caching the folder contents
Loading data from the store if it exists
Summary
7
Pre-Caching Other Folders and Files for Faster Navigation
Pre-Caching Other Folders and Files for Faster Navigation
Caching subfolders
Caching parent folders
Caching download links on files
The complete code—with added documentation
Summary
8
Introducing Vue-Router and Loading URL-Based Components
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
Nested routes
Creating a 404 page
Naming components, routes, and views
Programmatically navigating with, redirecting, and adding an alias
Summary
9
Using Vue-Router Dynamic Routes to Load Data
Using Vue-Router Dynamic Routes to Load Data
Outline and plan your app
Create initial files
Server setup
Loading CSV
Displaying a single product
Displaying product information
Product variations
Updating the product details when switching URLs
Summary
10
Building an E-Commerce Store – Browsing Products
Building an E-Commerce Store – Browsing Products
Listing the products
Creating pagination
Creating the ListProducts component
Creating a curated list for the home page
Showing more information
Creating categories
Displaying the categories
Displaying products in a category
Ordering products in a category
Creating Vuex getters
Building the filtering component based on products
Updating the URL on checkbox filter change
Filtering the products
Summary
11
Building an E-Commerce Store – Adding a Checkout
Building an E-Commerce Store – Adding a Checkout
Creating the basket array placeholder
Adding product information to the store
Updating the Add to basket button when adding an item
Showing the product count in the header of the app
Finalizing the Shop Vue-router URLs
Building the Order process and ListProducts component
Creating an Order Checkout page
Creating an editable basket
Completing the shop SPA
Summary
12
Using Vue Dev Tools and Testing Your SPA
Using Vue Dev Tools and Testing Your SPA
Using the Vue.js developer tools
Testing your SPA
Summary

Creating the basket array placeholder

To help us persist the products in the basket throughout the app, we are going to be storing the user's selected products in the Vuex store. This will be in the form of an array of objects. Each object will contain several key pieces of information that will allow us to display the products in the basket without having to query the Vuex store each time. It also allows us to store details about the current state of the product page—remembering the image updates when a variant is selected.

The details we're going to store for each product added to the basket are as follows:

  • Product title
  • Product handle, so we can link back to the product
  • Selected variation title (as it appears in the select box)
  • Currently selected image, so we can show an appropriate image in the Checkout
  • Variation details, this contains price and weight along...
Previous Section
End of Section 2
Next Section