Vue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired

1. Introducing Front-End Development with Vue.js
  
Introduction
 
Structure
 
Objectives
 
A brief history of web development
 
The rise of Vue.js
 
Comparing Vue.js with the competition
 
Using Vue.js to solve problems – Case studies
  
Case Study 1: Adding Vue.js into an already created site – client-side rendering
 
Case study 2: Building a Vue.js-based website
  
Conclusion
 
Points to remember
 
Multiple choice questions
 
Answers
 
Questions
 
Key terms
  
2. Working in Vue.js Roles
  
Introduction
 
Structure
 
Objectives
 
Working with Vue.js
  
Freelancer/Consultant
 
Design Studio
 
Small business
 
Small/Medium Enterprises
 
Large business/Enterprise
 
 
Job/Roles that use Vue.js
  
Front-end/Web Developer
 
Full-stack developer
 
JAMStack Developer
 
Mobile developer
  
Expected future demand
  
Junior Web Developer
 
Web developer
 
Senior Web Developer
 
Tech Lead/Lead Developer
 
Architect
 
Management
  
Conclusion
 
Points to remember
 
Multiple choice questions
 
Answers
 
Questions
 
Key terms
  
3. HTML, CSS, and JS/TS for Extra Credit
  
Introduction
 
Structure
 
Objectives
 
Working with a Virtual DOM
 
CSS rule application and CSS frameworks
  
CSS Frameworks
  
Modern JavaScript practices
  
Objects and Prototypes
 
Functions
 
JSON
 
Promises
 
Generators
 
Scopes
 
Classes, IIFEs and Modules
 
Callbacks
 
Async/Await and Promises
 
AJAX
 
Building structures
 
Basic functional programming concepts
 
Immutable data
 
Purity
 
Declaration of intent
 
Partial Function Application and Composability
  
Client-side APIs
  
Fetch API
 
Canvas API
 
Drag and Drop API
 
History API
 
Web Storage API
 
Web workers
 
Web Sockets API
  
Using TypeScript
 
Conclusion
 
Points to remember
 
Key terms
  
4. Understanding the Vue.js Instance
  
Introduction
 
Structure
 
Objectives
  
The Vue.js instance
  
The Options API
 
Understanding the Vue life cycle
  
Arrow functions and life cycle hooks
 
beforeCreate() life cycle hook
 
created() life cycle hook
 
beforeMount() life cycle hook
 
mounted() life cycle hook
 
beforeUpdate() life cycle hook
 
updated() life cycle hook
 
beforeUnmount() life cycle hook
 
unmounted() life cycle hook
 
Other hooks
 
Reactivity
 
Building an application
 
Using Vue.js as part of a wider app (script tag)
 
Creating Vue.js as a stand-alone application (NPM/CLI)
 
Creating Vue.js as a standalone application (NPM/Vite)
 
Mixins, filters, and custom directives
 
Mixins
 
Filters
 
Custom Directives
  
Including TypeScript support in Vue.js applications
 
Conclusion
 
Points to remember
 
Questions
 
Key terms
  
5. Designing Component-Based UIs and Single Page Applications
  
Introduction
 
Structure
 
Objectives
 
Understanding Vue.js Components
  
Template Section
 
Script Section
 
Render function
 
Style Section
  
Understanding component UI composition
 
Understanding data flow
 
Designing components
 
Functional components
 
The sample application as a set of components
  
Landing page
 
Design
 
Wireframe
 
Proposed components
 
Listing/Menu Page
 
Design
 
Wireframe
 
Proposed Components
 
Item Display Page
 
Design
 
Wireframe
 
Proposed Components
 
Checkout pages
 
Design
 
Wireframe
 
Proposed components
  
Login and Registration Pages
  
Design
 
Wireframe
 
Proposed components
  
Orders page
  
Design
 
Wireframe
 
Proposed components
  
Final thoughts
 
Conclusion
 
Points to remember
 
Key terms
  
6. Using the Composition API to Manage Component Logic
  
Introduction
 
Structure
 
Objectives
 
The Composition API
 
Problems solved by the Composition API
 
Composition API Life cycle and Reactive properties
  
reactive()
 
ref()
 
Composition API Life cycle Hooks
 
Data Flow between Composition API components
 
Props
 
Data
 
Events
 
Computed properties
 
Watchers
 
Template Refs
 
Fall-through attributes
  
Creating Composable utilities
 
VueUse – Composition API utilities library
 
Handling Dependency Injection - Provide and Inject
 
Using Teleport and Suspense
  
Teleport
 
Suspense
  
Conclusion
 
Key terms
  
7. Creating and Setting Up a Vue.js Application with Vue CLI and Vite
  
Introduction
 
Structure
 
Objectives
 
Git and NPM primer
  
Git Primer
 
Basic terminology
  
NPM Primer
 
Using the Vue CLI to create a project
 
Using the Vue UI to create and manage a project
 
Using Vite to create a project
 
Conclusion
 
Points to remember
 
Key terms
 
Questions
  
8. Adding a CSS Framework to the Mix – TailwindCSS, Bootstrap or Foundation
  
Introduction
 
Structure
 
Objectives
 
TailwindCSS and its place in the Web dev ecosystem
 
TailwindCSS configuration and basics
  
Configuration
 
Configuring options
 
Content
 
Theme
 
Colors, spacing and screens
 
Plugins
  
Using TailwindCSS
 
Including Tailwind to Vue.js projects
 
Adding pure CSS frameworks
 
Twitter Bootstrap
 
Zurb Foundation
 
Conclusion
 
Key terms
  
9. Building User Interfaces with Components
  
Introduction
 
Structure
 
Objectives
 
Setting Up – Managing the project folders and files
 
Building the Basic Prototype Templates
 
Landing Page Template
 
Page Layout
  
MenuBarComponent
 
FooterComponent
 
HeroComponent
 
OffersComponent
 
OfferComponent
  
Changes to App.vue
 
Conclusion
 
Key terms
  
10. Routing Between Pages with VueRouter
  
Introduction
 
Structure
 
Objectives
 
The practice of front-end routing
 
Adding the VueRouter
 
Building routing definitions
 
RouterRecordRaw Object
  
Path
  
Name
  
Component(s)
 
Props
 
beforeEnter
 
children
 
 
  
Updating the project: changing tags to router-link
 
VueRouter navigation guards
 
Navigating by code
  
push()
 
replace()
 
forward()/back()/go()
  
Final thoughts
 
Conclusion
 
Points to remember
 
Key terms
  
11. Interacting with the UI Using Events
  
Introduction
 
Structure
 
Objectives
 
Events in Vue.js
 
Triggering and handling standard DOM events
 
Creating custom events
 
Communication between parent and child components using custom events
 
Defining and validating events
  
Emitting events and passing data around
 
Communication through an event bus and the problems that it solves/creates
  
Conclusion
 
Points to remember
 
Key terms
  
12. Building Forms and Handling User Input
  
Introduction
 
Structure
 
Objectives
 
Value Binding and v-model
 
Creating forms and using form components
 
v-model modifiers
  
.number
 
.trim
 
.lazy
  
Handling form data and validation
  
Standard Validators in Vuelidate
 
Specifying configuration options
 
Custom Validators in Vuelidate
 
Checking for and handling validation fails
 
Validating collections and other advanced topics
 
Using ref\'s, reactive, and computed values and rules
 
Nested Validations, validation scopes and collector-only components
 
Changing the data returned from a validator
 
Returning errors from server side or API validation
 
Supporting i18n
 
Async setup functions
 
Using v-model with Components
 
Adding forms to the sample application
 
AddToCartComponent
 
CartAddressComponent
 
ApplyVoucherToCartComponent
 
LoginComponent
  
Conclusion
 
Points to remember
 
Key terms
  
13. Managing State with Pinia and API Communication
  
Introduction
 
Structure
 
Objectives
 
Managing state in Vue 3
 
Introduction to the Pinia store
  
Option Store type definition
 
Setup Store definition
 
State
 
Getters
 
Actions
  
Working with Pinia Stores
 
Talking to a server with Fetch API from your application
 
Integrating Axios into an application
 
GraphQL-based API access
 
Conclusion
  
14. Testing Vue.js Applications
  
Introduction
 
Structure
 
Objectives
 
The benefits of testing
 
Types of tests and tools to use
  
Unit tests
 
Component/integration tests
 
End-to-end tests
  
Adding tests to a Vue project
  
Adding Vitest and VitestUI
 
Adding Istanbul code coverage provider
 
Component mounting with @testing-library/vue
 
Adding Nightwatch
  
Testing components
 
Testing events
 
Testing composables
 
Testing Pinia and routing
  
Pinia
 
VueRouter
  
Using Nightwatch for E2E testing
 
Conclusion
 
Points to remember
 
Key terms
  
15. Server-Side Rendering with Nuxt.js
  
Introduction
 
Structure
 
Objectives
 
Nuxt.js basics and SSR
  
Multiple rendering techniques
  
Creating a project with Nuxt.js and managing dependencies
 
Building the Client-side of a Nuxt application
 
Nuxt components
  
Nuxt Pages
 
Nuxt layouts
  
Managing state and cross-component functionality in Nuxt
  
useState()
 
Lifecycle Hooks
 
Remote data
 
Error handling
 
Composables
 
Middleware
 
Router middleware
 
Server middleware
 
Plugins
 
Other folders
  
Building the server-side of a Nuxt application
  
Event handler basics
 
Handling body requests
 
Query parameters
 
Headers
 
Accessing the API
 
Routes
 
Route matching
 
Catch-all routes
 
Status codes, redirects and cookies
 
Server storage solutions
 
Plugins
 
Errors
 
Other directories
  
Conclusion
 
Points to remember
 
Key terms
  
16. Building Multi-tenanted Apps with Quasar
  
Introduction
 
Structure
 
Objectives
 
Quasar in context
  
Output Target
 
Build context
 
Component library
 
Boot file
  
Getting started
 
Multiple platforms
 
Building multi-tenanted apps
  
The Quasar Instance - $q
 
Platform detection
 
Screen detection
 
Internationalization (i18n)
  
Plugins, Extensions and Utilities
  
Plugins
 
App Extensions
 
Utilities
  
Building an application with Quasar
  
Creating an application
 
Constructing the application
  
Getting your application into the world
 
Conclusion
 
Points to remember
 
Key terms
  
17. Interview Questions
  
Introduction
 
Structure
 
Objectives
 
Questions and answers
 
Conclusion
  
Index