Vue.js 2 Web Development Projects.

Chau, Guillaume.
Birmingham : Packt Publishing, Limited, 2017.
1 online resource (391 pages)
1st ed.

Location Notes Your Loan Policy


Web site development.
Electronic books.
About the Author
About the Reviewer
Customer Feedback
Table of Contents
Chapter 1: Getting Started with Vue
Why another frontend framework?
A trending project
Compatibility requirements
One-minute setup
Creating an app
Vue devtools
Templates make your DOM dynamic
Displaying text
Adding basic interactivity with directives
Chapter 2: Project 1 - Markdown Notebook
A basic note editor
Setting up the project
The note editor
The preview pane
Computed property
Text interpolation escaping
Displaying HTML
Saving the note
Watching changes
Using a method
Accessing the Vue instance
Loading the saved note
Lifecycle hooks
Initializing directly in the data
Multiple notes
The note list
A method to create a new note
Button and click events with v-on
Binding attributes with v-bind
Displaying a list with v-for
Selecting a note
The current note
Dynamic CSS classes
Conditional templates with v-if
Saving the notes with the deep option
Saving the selection
The note toolbar with extras inside
Renaming the note
Deleting the note
Favorite notes
The status bar
Created date with a filter
Text stats
Chapter 3: Project 2 - Castle Duel Browser Game
Rules of the game
Setting up the project
The calm before the storm
The template option
The app state
The almighty components
Building the user interface
Our first component - the top bar
Adding some gameplay data to the state
Defining and using the components
Parent-to-child communication with Props
Props in our template
Displaying a card
Listening to native events on components
Child-to-parent communication with custom events
The hand.
Animating the hand with transitions
A prettier animation
Playing a card
Animating the card list
The key special attribute
The CSS transitions
The overlays
Content distribution with slots
The 'player turn' overlay
The 'last play' overlay
The 'game over' overlay
Dynamic component
The overlay animation
Key attribute
The overlay background
Game world and scenery
The castles
Castle banners
Food and health bubbles
Banner bars
Animating a value
The animated clouds
The animation
Drawing cards
The initial hand
The hand
Playing a card
No cheating allowed
Removing the card from the hand
Waiting for the card transition to end
Applying the card effect
The next turn
New turn
Overlay close actions
Game Over!
Chapter 4: Advanced Project Setup
Setting up our development environment
Installing vue-cli, the official command-line tool
Code editors
Our first full-blown Vue application
Scaffolding the project
Creating the app
Running our application
Render functions
Configuring babel
Babel Vue preset
Updating the dependencies
Updating manually
Updating automatically
Updating Vue
Building for production
Single-File Components
Using Pug
Scoped styles
Adding preprocessors
Components inside components
Chapter 5: Project 3 - Support Center
General app structure
Setting up the project
Routing and pages
Vue plugins
Our first routes with vue-router
Layouts with router-view
Creating routes
The router object
Router modes
Creating a navigation menu
Router links
Active class
FAQ - Consuming an API
Server setup
Using fetch
Loading animation.
Extending Vue with our own plugin
Creating a plugin
Plugin options
Fetch method
Reusing code with mixins
Fetching remote data
Loading management
Error management
Support tickets
User authentication
Storing the user in a centralized state
Another plugin
Login forms
Smart form
Form input component
Customizing v-model
Login component
Style children of scoped elements
Improving our fetch plugin
Sign up operation
Login operation
User menu
Logout method
Private routes with navigation guards
Route meta properties
Router navigation guards
Redirecting to the wanted route
Initializing user authentication
Guest routes
Displaying and adding tickets
Tickets list
Session expiration
Nested routes
Fixing our navigation guard
Sending a form
Form textarea
Binding attributes
User actions
Backup user input
Advanced routing features
Dynamic routes with parameters
Dynamic remote data
The dynamic route
Not found page
Scrolling behavior
Chapter 6: Project 4 - Geolocated Blog
Google Auth and state management
Project setup
Creating the app
Some routing
State management with Vuex
Why do I need this?
The Vuex Store
The state is the source of truth
Mutations update the state
Strict mode
Time-travel debugging
Getters compute and return data
Actions for store operations
Mapping helpers
User state
Setting up Google OAuth
Login button
User in the store
Adapting the router
Adapting the fetch plugin
Check the user session on start
The profile picture
Synchronizing the store and the router
Embedding Google Maps
Getting the API key
Installing the library
Adding a map
Connecting the BlogMap and the store
Vuex modules.
Namespaced module
Accessing global elements
BlogMap module and component
Mapping in the component
User position
Centering on the user
Blog posts and comments
Posts store module
Rendering functions and JSX
Writing the view in JavaScript with render functions
Dynamic templates
Data objects
Virtual DOM
What is JSX?
Blog content structure (in JSX!)
No content
Creating a post
Draft store actions
Blog Map changes
Click handler
Ghost marker
Post form
Making the request
Fetching posts
Store action
Fetch posts action
Action dispatching
Displaying markers
Login and logout
Selecting a post
Post details
Store changes for post selection and sending
Post Content component
Location info and scoped slots
Scoped slots to pass data to the parent
Implementing of the component
Comments - functional components
Store changes for comments
Functional component
Chapter 7: Project 5 - Online Shop and Scaling Up
Advanced development workflow
Setting up the project
Generating a quick development API
Launching the app
Auto-prefixing CSS with PostCSS
Targeting specific browsers with browserslist
Improving code quality and style with ESLint
Configuring ESLint
Customizing the rules
Running ESLint
ESLint inside Webpack
Unit testing with Jest
Configuring Jest
Babel configuration for Jest
Our first unit test
ESLint and Jest globals
Jest snapshots
Updating the snapshots
Complementary topics
Internationalization and code-splitting
Code-splitting with dynamic imports
Automatically loading the user locale
Changing Language page
Server-side rendering
Universal App Structure
Client entry
Server entry
State management.
Restoring the Vuex state on the client
Webpack configuration
Client configuration
Server configuration
Server-side setup
Page template
Express server
Creating and updating the renderer
Rendering the Vue app
Running our SSR app
Unnecessary fetch
Production build
Additional configuration
Extracting the style into CSS files
Production express server
New npm scripts
Chapter 8: Project 6 - Real-time Dashboard with Meteor
Setting up the project
What is Meteor?
Installing Meteor
Creating the project
Our first Vue Meteor app
Production measures
Meteor collections integration
Setting up data
Adding a collection
Adding a Meteor method
Simulating measures
Inspecting the data
Dashboard and reporting
Progress bars library
Meteor publication
Creating the Dashboard component
Listing the measures
Description based on publisher supplied metadata and other sources.
Local notes:
Electronic reproduction. Ann Arbor, Michigan : ProQuest Ebook Central, 2021. Available via World Wide Web. Access may be limited to ProQuest Ebook Central affiliated libraries.
Other format:
Print version: Chau, Guillaume Vue.js 2 Web Development Projects