Complete Vue.js 2 Web Development

Andrea Passaglia, Paul Halliday, Et al

December 2018

704 pages

21 hours 7 minutes

Become a pro in creating modern interactive web applications using this JavaScript framework

Quick links:

Description
Table of Contents
Reviews
Authors

Skip to the end of the images gallery

Skip to the beginning of the images gallery

Read Now Look inside

Description

More Information
Learn	Understand the fundamentals of Vue.js with practical examples Using vue-router dynamic routes to load data Build complex web interfaces using the Vue.js component system Use Webpack and Babel to enhance your development workflow Manage your application’s state using Vuex Seamlessly implement routing in your single page applications
About	This Learning Path is divided into three sections, with each section bringing you closer to developing high-end modern web applications with Vue.js 2. It starts with building example applications to get well versed with the Vue.js ecosystem. You will learn to use Vue.js by creating three single page applications that explore Vuex and vue-router, the standard Vue tools for caching data and routing URLs for your applications. Going further, the Learning Path will address some of the challenges in designing web applications with Vue.js. The Learning Path will have easy-to-follow recipes to help you tackle the challenges and craft dynamic front end. You will learn to integrate web utilities like Babel and Webpack to enhance your development workflow. Finally, towards the end, the course will introduce you to several design patterns to help you write clean, maintainable, and reusable codes with Vue framework. At the end of the Learning Path, you will be confident with expertise in leveraging all the components and productivity features of Vue.js and will be on your way to design your web applications and execute it by writing clean code. This Learning Path includes content from the following Packt products: Vue.js 2.x by Example by Mike Street Vue.js 2 Cookbook by Andrea Passaglia Vue.js Design Patterns and Best Practices by Paul Halliday
Features	Explore the exciting features of Vue.js 2 through interesting examples and practical recipes Craft highly modular applications using design patterns and the component architecture of Vue.js Learn how to utilize modern development tools by building applications with Vue.js
Page Count	704
Course Length	21 hours 7 minutes
ISBN	9781789959901
Date Of Publication	24 Dec 2018

Table of contents

1 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

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 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 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

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

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

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

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

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

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

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 the Vue.js developer tools
Testing your SPA
Summary

13 Transitions and Animations

Introduction
Integrating with third-party CSS animation libraries such as animate.css
Adding your own transition classes
Animating with JavaScript instead of CSS
Transitioning on the initial render
Transitioning between elements
Letting an element leave before the enter phase in a transition
Adding entering and leaving transitions for elements of a list
Transitioning elements that move in a list
Animating the state of your components
Packaging reusable transitions into components
Dynamic transitions

14 Vue Communicates with the Internet

Introduction
Sending basic AJAX requests with Axios
Validating user data before sending it
Creating a form and sending data to your server
Recovering from an error during a request
Creating a REST client (and server!)
Implementing infinite scrolling
Processing a request before sending it out
Preventing XSS attacks to your app

15 Single Page Applications

Introduction
Creating an SPA with vue-router
Fetching data before switching route
Using named dynamic routes
Having more than one router-view in your page
Compose your routes hierarchically
Using route aliases
Adding transitions between your routes
Managing errors for your routes
Adding a progress bar to load pages
How to redirect to another route
Saving scrolling position when hitting back

16 Organize + Automate + Deploy = Webpack

Introduction
Extracting logic from your components to keep the code tidy
Bundling your component with Webpack
Organizing your dependencies with Webpack
Using external components in your Webpack project
Developing with continuous feedback with hot reloading
Using Babel to compile from ES6
Running a code linter while developing
Using only one command to build both a minified and a development .js file
Releasing your components to the public

17 Advanced Vue.js - Directives, Plugins, and Render Functions

Introduction
Creating a new directive
Using WebSockets in Vue
Writing a plugin for Vue
Rendering a simple component manually
Rendering a component with children
Using JSX to render a component
Creating a functional component
Building a responsive table with higher-order components

18 Large Application Patterns with Vuex

Introduction
Dynamically loading pages in your vue-router
Building a simple storage for the application state
Understanding Vuex mutations
Listing your actions in Vuex
Separating concerns with modules
Building getters to help retrieve your data
Testing your store

19 Integrating with Other Frameworks

Introduction
Building universal applications with Electron
Using Vue with Firebase
Creating a real-time app with Feathers
Creating a reactive app with Horizon

20 Vue Router Patterns

Single Page Applications
Using the router
An SPA project
Summary

21 State Management with Vuex

What is Vuex?
Using Vuex
Vuex and Vue devtools
Modules and scalability
Summary

Authors

Andrea Passaglia

Andrea Passaglia was born in Genoa, in northern Italy. Interested about technology since his parents gave him a toy computer when he was a boy, he started studying web technologies at an early age. After obtaining his master's degree in computer engineering he worked on the design and implementation of web interfaces for companies of various sizes and in different industries (healthcare, fashion, tourism, and transport). In 2016 he moves in the silicon valley of Europe to tackle new problems in the banking industry at the Edgeverve Dublin Research and Development Labs. A backend technologist by trade, Vue.js is his first tool to bring to life his creations when it comes to the frontend. Andrea is married to a lovely Russian girl from Siberia and they often cook together mixing culinary traditions.

Paul Halliday

Paul Halliday (BSc Hons) is a developer advocate with a focus on fast-moving technologies. His online courses have taught over 25,000 students across a wide variety of software development subjects. He's also a progress developer expert with expertise in NativeScript and Kendo UI.

Mike Street

Mike Street (aka mikestreety) is a frontend developer from Brighton, UK. Specializing in Gulp, SCSS, HTML, and Vue, he has been developing websites professionally since 2010. After making his first Vue app as an experimental side project, he's been hooked ever since. When not developing on the web, Mike likes to explore the Sussex countryside on his bike, start a new side-project without finishing the last, or heading to the cinema.