Catalogue
/
Web Development
/
Advanced Nuxt, Vue, Vite, and TypeScript for Maintainable Web Applications

Advanced Nuxt, Vue, Vite, and TypeScript for Maintainable Web Applications

A practical course for developers who already have a fundamental understanding of Nuxt, Vue, and TypeScript and want to build more maintainable, resilient, and performant applications. The agenda focuses on architecture, design patterns, state management with Pinia, testing, defensive programming, Vite, and advanced TypeScript patterns. The course is centered on pragmatic decisions that improve code quality, developer experience, and production readiness.

What will you learn?

You will deepen your understanding of Nuxt architecture and advanced Vue patterns so applications remain easier to scale and maintain. You will learn how to use Pinia, testing, TypeScript, and Vite more deliberately in a production focused workflow. You will also strengthen your ability to improve Web Vitals, handle errors defensively, and structure applications with clearer boundaries.

  • Apply Nuxt architecture and advanced Vue design patterns more effectively
  • Use Pinia state management with clear ownership and maintainable data flow
  • Improve reliability through testing, test driven thinking, and defensive programming
  • Optimize Web Vitals and build workflows with practical TypeScript and Vite patterns

Requirements:

  • Fundamental understanding of Nuxt, Vue, and TypeScript
  • Experience building or maintaining at least one frontend application
  • Basic familiarity with routing, components, composables, and API integration

Course Outline*:

*We customize the course outline and content to your specific needs and relevant use cases.

Module 1: Nuxt architecture and application structure

  • Nuxt project structure, routing, layouts, middleware, plugins, and composables
  • Layered architecture for pages, features, shared components, and services
  • Design patterns for maintainability, separation of concerns, and reuse
  • Choosing boundaries between Nuxt server logic, client logic, and shared code

Module 2: Advanced Vue patterns in a Nuxt context

  • Component design patterns for complex applications
  • Composables for reusable logic, side effects, and integration boundaries
  • Slots, props, emits, and provide or inject in advanced component design
  • Avoiding over abstraction while keeping components flexible and readable

Module 3: State management strategies with Pinia

  • Deciding between local state, composables, Pinia stores, and server state
  • Structuring Pinia stores for ownership, readability, and testability
  • Handling derived state, async actions, persistence, and reset patterns
  • Avoiding global state sprawl and unclear dependency chains

Module 4: TypeScript for stronger application design

  • Typing components, composables, stores, and API responses
  • Practical type narrowing with guards, discriminated unions, and exhaustive checks
  • Generics for reusable utilities, composables, and typed data helpers
  • Balancing strict typing with developer productivity

Module 5: Testing and test driven thinking in Nuxt and Vue

  • Testing strategy for components, composables, stores, and pages
  • Test driven development as a way to clarify behavior and reduce regressions
  • Mocking API calls, stores, routing, and Nuxt specific context
  • Organizing tests for fast feedback and maintainable coverage

Module 6: Defensive programming and error handling

  • Designing predictable error boundaries for pages, components, and API calls
  • Handling loading states, empty states, validation failures, and network issues
  • Defensive coding patterns for external data and unexpected user behavior
  • Logging, user feedback, and recovery paths without overcomplicating the app

Module 7: Vite and module bundling in practice

  • How Vite supports modern Nuxt and Vue development workflows
  • Understanding bundling, code splitting, dependency optimization, and hot module replacement
  • Managing aliases, environment variables, plugins, and build configuration
  • Identifying bundle issues and keeping build setup understandable

Module 8: Web Vitals and production optimization

  • Core Web Vitals and how they relate to Nuxt and Vue applications
  • Optimizing rendering, hydration, images, fonts, and client side JavaScript
  • Reducing unnecessary reactivity, watchers, and expensive component updates
  • Building a practical checklist for performance, reliability, and maintainability

Hands-on learning with expert instructors at your location for organizations.

4,122€*
Graph Icon - Education X Webflow Template
Level:
advanced
Clock Icon - Education X Webflow Template
Duration:
14
Hours (days:
2
)
Camera Icon - Education X Webflow Template
Training customized to your needs
Star Icon - Education X Webflow Template
Immersive hands-on experience in a dedicated setting
*Price can range depending on number of participants, change of outline, location etc.
Get Quote

Master new skills guided by experienced instructors from anywhere.

3,087€*
Graph Icon - Education X Webflow Template
Level:
advanced
Clock Icon - Education X Webflow Template
Duration:
14
Hours (days:
2
)
Camera Icon - Education X Webflow Template
Training customized to your needs
Star Icon - Education X Webflow Template
Reduced training costs
*Price can range depending on number of participants, change of outline, location etc.
Get Quote

Upcoming Sessions

8-9 Oct 2026
Madrid
Book
5-6 Nov 2026
Lisbon
Book
20-21 Jan 2027
Stockholm
Book
28-29 Jan 2027
Lisbon
Book
11-12 Feb 2027
Brussels
Book
23-24 Feb 2027
Stockholm
Book

Can't find a suitable date? Get in touch and we'll arrange one that works for you.

We use cookies to improve site navigation, analyse how the site is used, and support our marketing. You can accept all cookies, reject non-essential ones, or choose individual categories. Read our Cookie Notice
Preferences Deny Accept