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