Large Scale Apps with Vue, Vite and TypeScript

✍ Scribed by Damiano Fusco

• Publisher: Leanpub
• Year: 2023
• Tongue: English
• Leaves: 263
• Category: Library

✦ Synopsis

Build Large and Scalable front-ends that leverage component isolation, internationalization, localization, a modular state manager, component Libraries, API-client code that easily can switch between mocked data and live data and more.

✦ Table of Contents

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