Vue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired 9789355518750
Learn how to build cross-platform applications with Vue.js Key Features ● Build fast, interactive, and user-friendly we
198 64 3MB
English Pages 625 Year 2023
Table of contents :
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
![The complete guide to outdoor carpentry: complete plans for beautiful backyard building projects [Updated 2nd edition]
9781591866183, 1591866189](https://dokumen.pub/img/200x200/the-complete-guide-to-outdoor-carpentry-complete-plans-for-beautiful-backyard-building-projects-updated-2nd-edition-9781591866183-1591866189.jpg)
