Large Scale Apps with Vue, Vite and TypeScript

Table of Contents
LARGE SCALE APPS WITH VUE, VITE, AND TYPESCRIPT
Preface
Goal
Thanks
About me
Audience
Text Conventions
Prerequisites
Companion Code
Chapter 1 - Setting Up The Project
Create Project Wizard
Chapter 1 Recap
Chapter 2 - Your First Component
The Items List
ItemsList Component Requirements
ItemsList Component Code
App.vue
Chapter 2 Recap
Chapter 3 - Data Model Interfaces
Models Directory
Interface ItemInterface
ItemsList Component
App.vue
Chapter 3 Recap
Chapter 4 - Adding Events To the Items Component
ItemsList Component
Chapter 4 Recap
Chapter 5 - Intro to Unit Testing While Refactoring a Bit
ItemComponent
Add unit tests support to our project
ItemComponent Unit Tests
ItemsList component updates
Chapter 5 Recap
Chapter 6 - State Management
Store Architecture
Items.view.vue
App.vue
Web Browser
ItemsList.component.vue updates
Web Browser
Loader Component
Chapter 6 Recap
Chapter 7 - Api Client
API Client Overview
Domains
The Main ApiClient
Items domain Api Client
Mock and Live Api Clients
Environment Variables
Api Client Provider
Store Instance updates
Alternatives
Chapter 7 Recap
Chapter 8 - Enhance the Api Client
HttpClient Interfaces and Models
UrlUtils Unit Tests
HttpClient: Unit Tests
ItemsApiClientModel Update
Chapter 8 Recap
Chapter 9 - App Configuration
vite-env.d.ts updates (or env.d.ts)
.env files updates
Config Interface
Config files
tsconfig.json updates
Config files map
Config provider
Unit Tests
HttpClient code updates
Api Client code updates
Chapter 9 Recap
Chapter 10 - Localization and Internationalization - Language Localization
Plugins: i18next, vue-i18n
Config updates
Translation JSON data
API Client updates
Updates to ApiClient.interface.ts
Updates to ApiClient instances
i18n initialization and useLocalization hook
App.vue updates
Browser
Chapter 10 Recap
Chapter 11 - Localization and Internationalization - Number and DateTime Formatters
Directory localization/formatters
Chapter 11 Recap
Chapter 12 - Adding Tailwind CSS
Chapter 12 Recap
Chapter 13 - Intro to Primitives
Atomic Design and Similar Approaches
Conventions
General Strategies
Text Elements
Primitives View
Chapter 13 Recap
Chapter 14 - More Primitives
Button Elements
Primitives View - update
Toggle/Checkbox Elements
Primitives View - one more update
Chapter 14 Recap
Chapter 15 - A Primitive Modal
Icon: ElIconAlert
File ElModal.vue
File src/index.html
File useModalDialog.ts
Updates to Primitives.view.vue
Browser
Chapter 15 Recap
Chapter 16 - Higher-level components
Item Component - updates
ItemsList Component - updates
Summary
Chapter 16 Recap
Chapter 17 - Creating a Component Library
Create my-component-library
Chapter 17 Recap
Chapter 18 - Creating a JavaScript library
Create my-js-helpers
Chapter 18 Recap
Chapter 19 - Publish a library as a NPM package
Create an NPM user account
Create an Organization under your NPM profile
Update my-js-helpers package.json
Publishing the library
Consuming your NPM package
Chapter 18 Recap
(More Chapters Coming Soon)
Naming Conventions
Coding Standards
Resources
Websites
Tutorials
Blogs
Books