Vue.js 2.x by Example

By : Mike Street

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.

Preface

What this book covers

What you need for this book

Free Chapter

Getting Started with Vue.js

Creating the workspace

Initializing Vue and displaying the first message

Computed values

Methods and reusable functions

Summary

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

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

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

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

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

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

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

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

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

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

Using Vue Dev Tools and Testing Your SPA

Using the Vue.js developer tools

Testing your SPA

Summary

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can download the code files by following these steps:

Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.

You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Vue.JS-2.5-by-Example. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Downloading the color images of this book

We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/VueJS2.5+byExample_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code-we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at [email protected], and we will do our best to address the problem.

Vue.js 2.x by Example

By : Mike Street

Vue.js 2.x by Example

By: Mike Street

Overview of this book

Related Content you might be interested in

Current Title:

Vue.js 2.x by Example

Vue.js 2 Design Patterns and Best Practices

Vue.js 2 Cookbook

ASP.NET Core 2 and Vue.js