LARGE SCALE APPS WITH VUE, VITE, AND TYPESCRIPT
- Preface
- Prerequisites
- Companion Code
Lesson 1 - Setting Up The Project
- Create Project Wizard
- Lesson 1 Recap
- Exercise 1
- Quiz 1
Lesson 2 - Your First Component
- The Items List
- ItemsList Component Requirements
- ItemsList Component Code
- App.vue
- Lesson 2 Recap
- Exercise 2
- Quiz 2
Lesson 3 - Data Model Interfaces
- Models Directory
- Interface ItemInterface
- ItemsList Component
- App.vue
- Lesson 3 Recap
- Exercise 3
- Quiz 3
Lesson 4 - Adding Events To the Items Component
- ItemsList Component
- Lesson 4 Recap
- Exercise 4
- Quiz 4
Lesson 5 - Intro to Unit Testing While Refactoring a Bit
- ItemComponent
- Add unit tests support to our project
- ItemComponent Unit Tests
- ItemsList component updates
- Lesson 5 Recap
- Exercise 5
- Quiz 5
Lesson 6 - State Management
- Store Architecture
- Items.view.vue
- App.vue
- Web Browser
- ItemsList.component.vue updates
- Web Browser
- Loader Component
- Lesson 6 Recap
- Exercise 6
- Quiz 6
Lesson 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
- Lesson 7 Recap
- Exercise 7
- Quiz 7
Lesson 8 - Enhance the Api Client
- HttpClient Interfaces and Models
- UrlUtils Unit Tests
- HttpClient: Unit Tests
- ItemsApiClientModel Update
- Lesson 8 Recap
- Exercise 8
- Quiz 8
Lesson 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
- Lesson 9 Recap
- Exercise 9
- Quiz 9
Lesson 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
- Lesson 10 Recap
- Exercise 10
- Quiz 10
Lesson 11 - Localization and Internationalization - Number and DateTime Formatters
- Directory localization/formatters
- Lesson 11 Recap
- Exercise 11
- Quiz 11
Lesson 12 - Adding Tailwind CSS
- Lesson 12 Recap
- Exercise 12
- Quiz 12
Lesson 13 - Intro to Primitives
- Atomic Design and Similar Approaches
- Conventions
- General Strategies
- Text Elements
- Primitives View
- Lesson 13 Recap
- Exercise 13
- Quiz 13
Lesson 14 - More Primitives
- Button Elements
- Primitives View - update
- Toggle/Checkbox Elements
- Primitives View - one more update
- Lesson 14 Recap
- Exercise 14
- Quiz 14
Lesson 15 - A Primitive Modal
- Icon: ElIconAlert
- File ElModal.vue
- File src/index.html
- File useModalDialog.ts
- Updates to Primitives.view.vue
- Browser
- Lesson 15 Recap
- Exercise 15
- Quiz 15
Lesson 16 - Higher-level components
- Item Component - updates
- ItemsList Component - updates
- Summary
- Lesson 16 Recap
- Exercise 16
- Quiz 16
Lesson 17 - Creating a Component Library
- Create my-component-library
- Lesson 17 Recap
- Exercise 17
- Quiz 17
Lesson 18 - Creating a JavaScript library
- Create my-js-helpers
- Lesson 18 Recap
- Exercise 18
- Quiz 18
Lesson 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
- Lesson 19 Recap
- Exercise 19
- Quiz 19
Appendix
- Naming Conventions
- Resources