Vue.js 2.x by Example

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

Vue.js 2.x by Example

Mike Street

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

Quick links: > What will you learn?> Table of content> Product reviews

eBook
$28.00
RRP $39.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$28.00
$49.99
RRP $39.99
RRP $49.99
eBook
Print + eBook

Frequently bought together


Vue.js 2.x by Example Book Cover
Vue.js 2.x by Example
$ 39.99
$ 28.00
TypeScript 2.x By Example Book Cover
TypeScript 2.x By Example
$ 35.99
$ 25.20
Buy 2 for $35.00
Save $40.98
Add to Cart

Book Details

ISBN 139781788293464
Paperback412 pages

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.

Table of Contents

Chapter 1: Getting Started with Vue.js
Creating the workspace
Initializing Vue and displaying the first message
Computed values
Methods and reusable functions
Summary
Chapter 2: 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
Chapter 3: 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
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
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
Final Code
Summary
Chapter 6: 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
Chapter 7: 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
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
Nested routes
Creating a 404 page
Naming components, routes, and views
Programmatically navigating with, redirecting, and adding an alias
Summary
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: Using Vue Dev Tools and Testing Your SPA
Using the Vue.js developer tools
Testing your SPA
Summary

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

Authors

Table of Contents

Chapter 1: Getting Started with Vue.js
Creating the workspace
Initializing Vue and displaying the first message
Computed values
Methods and reusable functions
Summary
Chapter 2: 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
Chapter 3: 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
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
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
Final Code
Summary
Chapter 6: 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
Chapter 7: 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
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
Nested routes
Creating a 404 page
Naming components, routes, and views
Programmatically navigating with, redirecting, and adding an alias
Summary
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: Using Vue Dev Tools and Testing Your SPA
Using the Vue.js developer tools
Testing your SPA
Summary

Book Details

ISBN 139781788293464
Paperback412 pages
Read More
From 2 reviews

Read More Reviews

Recommended for You

TypeScript 2.x By Example Book Cover
TypeScript 2.x By Example
$ 35.99
$ 25.20
Matplotlib 2.x By Example Book Cover
Matplotlib 2.x By Example
$ 35.99
$ 25.20
OpenCV 3.x with Python By Example - Second Edition Book Cover
OpenCV 3.x with Python By Example - Second Edition
$ 35.99
$ 25.20
Full-Stack Vue.js 2 and Laravel 5 Book Cover
Full-Stack Vue.js 2 and Laravel 5
$ 35.99
$ 25.20
Vue.js 2 Web Development Projects Book Cover
Vue.js 2 Web Development Projects
$ 35.99
$ 25.20
Rust Programming By Example Book Cover
Rust Programming By Example
$ 35.99
$ 25.20