O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Vue.js 2.x by Example

Book Description

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

About This Book

  • 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

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.

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

In Detail

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.

Style and approach

This book takes you three projects, with step-by-step instructions to help you understand the concepts of Vue and put it into practice.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book 
      3. Errata
      4. Piracy
      5. Questions
  2. Getting Started with Vue.js
    1. Creating the workspace
      1. Application space
      2. Vue library
    2. Initializing Vue and displaying the first message
    3. Computed values
    4. Methods and reusable functions
    5. Summary
  3. Displaying, Looping, Searching, and Filtering Data
    1. HTML declarations 
      1. v-html
      2. Declarative rendering
    2. Conditional rendering
      1. v-if
      2. v-else
    3. v-for and displaying our data
      1. Creating links using v-html
      2. Format balance
      3. Format registered date
    4. Filtering our data
      1. Building the form
      2. Binding the inputs
    5. Showing and hiding Vue content
      1. Filtering our content
      2. Filtering our filters
    6. Changing CSS classes
    7. Filtering and custom classes
    8. Summary
  4. Optimizing your App and Using Components to Display Data
    1. Optimizing the code
      1. Reducing the number of filter variables and grouping logically
      2. Combining the format functions
        1. Autodetection formatting
        2. Passing in a second variable
      3. Creating the method
      4. Reducing the number of hard-coded variables and properties, and reducing redundancy
    2. Creating Vue components
      1. Creating and initializing your component
      2. Using your component
    3. Using component data and methods
    4. Passing data to your component – props
    5. Passing data to your component – slots
    6. Creating a repeatable component
      1. Creating component methods and computed functions
        1. CSS class functions
        2. Formatted value functions
      2. Making the filtering work again with props
    7. Making the filters a component
      1. Creating the component
      2. Resolving JavaScript errors
      3. Using custom events to change the filter field
      4. Updating the filter query
    8. Summary
  5. Getting a List of Files Using the Dropbox API
    1. Getting started—loading the libraries
    2. Creating a Dropbox app and initializing the SDK
    3. Displaying your data and using Vue to get it
      1. Create the component
      2. Retrieve the Dropbox data
      3. The Vue life cycle hooks
      4. Displaying the Dropbox data
      5. More file meta information
      6. Formatting the file sizes
    4. Adding a loading screen
    5. Animating between states
    6. Summary
  6. Navigating through the File Tree and Loading Folders from the URL
    1. Separating out files and folders
    2. Making file and folder components
    3. Linking folders and updating the structure
    4. Creating a breadcrumb from the current path
    5. Adding the ability to download files
    6. Updating the URL hash and using it to navigate through the folders
      1. Showing the folder based on the URL
      2. Displaying an error message 
      3. Using the back and forward buttons in your browser
        1. Removing unneeded code
        2. Updating the structure with a URL change and setting Vue data outside of the instance
    7. Final Code
    8. Summary
  7. Caching the Current Folder Structure Using Vuex
    1. Including and initializing Vuex
    2. Utilizing the store
      1. Retrieving the message
      2. Updating the message
    3. Using the Vuex store for the folder path
      1. Updating the path methods to use store commits
      2. Using the path variable
        1. Updating the breadcrumb component
        2. Updating the dropbox-viewer component to work with Vuex
    4. Caching the folder contents
    5. Loading data from the store if it exists
      1. Loading the data from the store
      2. Only storing new data
    6. Summary
  8. Pre-Caching Other Folders and Files for Faster Navigation
    1. Caching subfolders
      1. Planning app methods
      2. Creating the getFolderStructure method
      3. Showing the data with the displayFolderStructure method
        1. Set the loading state to true and create an empty structure object
        2. Load the contents of the getFolderStructure method
        3. Loop through the result and add each item to either the folders or files array
        4. Update the global structure object and remove the loading state
        5. Instigating the method
      4. Caching the subfolders
        1. Alternative caching method
    2. Caching parent folders
      1. Caching parent folders once
    3. Caching download links on files
    4. The complete code—with added documentation
    5. Summary
  9. Introducing Vue-Router and Loading URL-Based Components
    1. Installing and initializing Vue-router
    2. Changing the folder for Vue-router
    3. Linking to the different routes
    4. Linking to sub-routes
    5. Dynamic routes with parameters
      1. GET parameters
      2. Using props
        1. Setting prop defaults
        2. Using static props
    6. Nested routes
    7. Creating a 404 page
    8. Naming components, routes, and views
      1. Naming components
      2. Naming routes
      3. Named views
    9. Programmatically navigating with, redirecting, and adding an alias
      1. Navigating programmatically
      2. Redirecting
      3. Alias routes
    10. Summary
  10. Using Vue-Router Dynamic Routes to Load Data
    1. Outline and plan your app
      1. Components
        1. Route components
        2. HTML components
      2. Paths
    2. Create initial files
    3. Server setup
      1. Storing the file locally
      2. Using a remote server
      3. Setting up local server
    4. Loading CSV
      1. Loading a CSV with d3
      2. Loading a CSV with CSV Parser
      3. Unifying Shopify CSV data
      4. Storing the products
    5. Displaying a single product
      1. Page Not Found
      2. Selecting the right product
      3. Catching products not found
    6. Displaying product information
      1. Product images
    7. Product variations
      1. Variations display table
        1. Using a key with loops
        2. Displaying the variations in a table
      2. Displaying variations in a select box
    8. Updating the product details when switching URLs
    9. Summary
  11. Building an E-Commerce Store – Browsing Products
    1. Listing the products
      1. Adding a new route
      2. Looping through products
    2. Creating pagination
      1. Calculating the values
      2. Displaying a paginated list
      3. Creating paginating buttons
      4. Updating the URL on navigation
      5. Creating pagination links
      6. Updating the items per page
    3. Creating the ListProducts component
    4. Creating a curated list for the home page
    5. Showing more information
    6. Creating categories
      1. Creating a category list
      2. Creating an "miscellaneous" category
    7. Displaying the categories
    8. Displaying products in a category
      1. Code optimization
    9. Ordering products in a category
      1. Store the product price
      2. Wiring up the ordering
    10. Creating Vuex getters
    11. Building the filtering component based on products
      1. Dynamically creating filters
      2. Resetting filters
    12. Updating the URL on checkbox filter change
      1. Preselecting filters on page load
    13. Filtering the products
    14. Summary
  12. Building an E-Commerce Store – Adding a Checkout
    1. Creating the basket array placeholder
    2. Adding product information to the store
      1. Creating the store mutation to add products to the basket
    3. Updating the Add to basket button when adding an item
    4. Showing the product count in the header of the app
      1. Calculating the basket quantity
    5. Finalizing the Shop Vue-router URLs
    6. Building the Order process and ListProducts component
      1. Order Confirmation screen
      2. Using Vue filters to format the price
      3. Calculating a total price
    7. Creating an Order Checkout page
      1. Copying details between addresses
    8. Creating an editable basket
      1. Creating editable fields
      2. Removing items from your cart
    9. Completing the shop SPA
    10. Summary
  13. Using Vue Dev Tools and Testing Your SPA
    1. Using the Vue.js developer tools
      1. Inspecting Vue components data and computed values
      2. Viewing Vuex mutations and time-travel
      3. Previewing event data
    2. Testing your SPA
      1. Command-line unit testing
      2. Browser automation
    3. Summary