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

Navigating through the File Tree and Loading Folders from the URL

In Chapter 4, Getting a List of Files Using the Dropbox API, we created an app that listed the file and folder contents of a specified Dropbox folder. We now need to make our app easy to navigate. This means the user will be able to click the folder names to navigate into and list the contents of, and also give the user the ability to download the file.

Before you proceed, ensure you have the Vue and Dropbox JavaScript files included in your HTML.

In this chapter, we are going to be:

  • Creating a component for both files and folders
  • Adding links to the folder component to update the directory listing
  • Adding a download button to the file component
  • Creating a breadcrumb component, so the user can easily navigate back up the tree
  • Dynamically updating the browser URL, so if a folder is bookmarked or a link shared, the...
Previous Section
End of Section 1
Next Section