Vue JS with Gen AI

You can write modern, asynchronous JavaScript using ES6+ features, arrow functions, promises, and the Fetch API required for building reactive Vue applications.

1. Modern JavaScript: ES6+, arrow functions and modules90 min
   • let and const bindings
   • arrow functions
   • ES modules (import/export)
   • template literals
2. Arrays, objects and destructuring90 min
   • array methods (map, filter, reduce)
   • object destructuring
   • spread and rest operators
   • optional chaining
3. Promises, async/await and fetch120 min
   • Promise lifecycle
   • async/await syntax
   • fetch API
   • try/catch error handling
4. The DOM and events90 min
   • document.querySelector
   • addEventListener
   • event bubbling
   • event delegation
5. Tooling: npm, Vite and the dev environment90 min
   • npm scripts
   • package.json management
   • Vite dev server
   • Node modules structure

Hands-on project: Build a command-line asynchronous data fetcher that queries a public REST API, parses JSON responses using async/await, and handles network failures gracefully.

You can bootstrap a Vue 3 application, render reactive templates, control UI flow with directives, and manage two-way data binding with forms.

1. What Vue is and the progressive framework idea90 min
   • progressive framework concept
   • Vue 3 vs Vue 2
   • declarative rendering
   • virtual DOM overview
2. The Vue app, templates and interpolation90 min
   • createApp
   • mount method
   • mustache interpolation
   • v-html directive
3. Directives: v-if, v-for, v-bind and v-on120 min
   • v-if / v-else / v-show
   • v-for with key tracking
   • v-bind shorthand (:)
   • v-on shorthand (@)
4. Two-way binding with v-model90 min
   • v-model on input elements
   • modifiers (.trim, .number, .lazy)
   • v-model on checkboxes
   • radio button binding
5. Methods, computed properties and watchers120 min
   • methods vs computed
   • cached computed properties
   • watch and watchEffect
   • reactive side effects

Hands-on project: Build an interactive task tracker SPA using Vue 3 CDN or Vite setup, featuring conditional task filtering with v-for and v-if, and reactive status updates with v-model.

You can design modular, reusable components using the modern Vue 3 Composition API, passing props, emitting custom events, and extracting logic into composables.

1. Components, props and events90 min
   • Single File Components (.vue)
   • defineProps
   • defineEmits
   • component nesting
2. The Composition API and setup120 min
   • <script setup>
   • setup context
   • component registration
   • template refs
3. Reactivity: ref, reactive and computed90 min
   • ref() vs reactive()
   • toRefs and toRef
   • computed getter/setter
   • unwrapping reactivity
4. Lifecycle hooks and watchers90 min
   • onMounted
   • onUpdated
   • onUnmounted
   • watch source options
5. Slots and reusable composables120 min
   • default and named slots
   • scoped slots
   • composable design pattern
   • VueUse utility library

Hands-on project: Refactor a monolithic product catalog into reusable Single File Components (SFCs) using script setup, typed props, custom emit events, and a shared custom useLocalStorage composable.

You can build multi-page single-page applications with Vue Router, implement route guards, and construct robust validated forms using v-model.

1. Vue Router and navigation90 min
   • createRouter
   • createWebHistory
   • router-view
   • router-link
2. Route params, nested and protected routes120 min
   • dynamic route matching
   • nested routes (children)
   • router navigation guards
   • meta fields for auth
3. Building forms with v-model90 min
   • form state binding
   • select dropdowns
   • textarea bindings
   • preventing default submit
4. Form validation90 min
   • custom validation logic
   • dirty and touched states
   • error message rendering
   • validation libraries
5. Building multi-page applications120 min
   • layout architecture
   • active link styling
   • scroll behavior control
   • lazy-loaded route chunks

Hands-on project: Build a multi-step user onboarding wizard with Vue Router dynamic parameters, nested layout routes, programmatic navigation, and client-side form validation rules.

You can manage global application state across independent component trees using Pinia stores, actions, getters, and local storage persistence.

1. Why state management90 min
   • prop drilling problem
   • event bus anti-pattern
   • centralized store architecture
   • Pinia vs Vuex
2. Pinia stores, state and actions120 min
   • createPinia
   • defineStore (Setup and Options)
   • state definition
   • actions (sync and async)
3. Getters and composition90 min
   • store getters
   • accessing other stores
   • storeToRefs helper
   • patching state
4. Sharing state across components90 min
   • multi-component subscriptions
   • cross-store communication
   • store reset methods
   • testing stores standalone
5. Persisting and structuring state120 min
   • pinia-plugin-persistedstate
   • modular store separation
   • hydration handling
   • local storage sync

Hands-on project: Implement a shopping cart store in Pinia managing items, quantity increments, asynchronous checkout actions, computed totals, and plugin-based state persistence.

You can consume REST APIs cleanly with Axios, manage asynchronous loading and error states, and implement pagination and infinite scroll.

1. Fetching data with fetch and Axios90 min
   • Axios instances
   • request interceptors
   • response interceptors
   • global error handling
2. Consuming REST APIs90 min
   • GET, POST, PUT, DELETE requests
   • payload serialization
   • header configuration
   • Bearer token attachment
3. Loading, error and empty states90 min
   • isLoading boolean flags
   • error message catching
   • empty dataset fallbacks
   • retry mechanisms
4. Composables for data (VueUse)90 min
   • useFetch composable
   • useDebounceFn
   • useAsyncState
   • polling intervals
5. Pagination and infinite scroll90 min
   • cursor-based pagination
   • offset pagination
   • Intersection Observer API
   • infinite scroll composable

Hands-on project: Build an enterprise data table fetching paginated records from a backend REST API, featuring search debounce, sort query parameters, and loading skeleton states.

You can style Vue applications professionally using Tailwind CSS utility classes, scoped component styles, and component libraries like Vuetify.

1. Scoped styles and CSS approaches90 min
   • <style scoped>
   • CSS modules
   • v-bind() in CSS
   • global vs local styles
2. Tailwind CSS in depth120 min
   • utility-first workflow
   • tailwind.config.js setup
   • flexbox and grid layouts
   • responsive prefixes
3. Responsive and accessible UI90 min
   • mobile-first design
   • ARIA attributes
   • keyboard navigation
   • screen reader visibility
4. Component libraries (Vuetify)120 min
   • Vuetify installation
   • Material Design components
   • theme configuration
   • tree-shaking icons
5. Building a polished design system90 min
   • reusable button variants
   • card and modal wrappers
   • design tokens
   • consistent typography

Hands-on project: Design a responsive analytics dashboard using Tailwind CSS utility classes, dark mode toggle, CSS transitions, and Vuetify data grid components.

You can write type-safe Vue applications by applying TypeScript to props, emits, template refs, Pinia stores, and external API responses.

1. TypeScript fundamentals90 min
   • primitive and union types
   • interfaces and type aliases
   • generics in functions
   • tsconfig configuration
2. Typing props, emits and refs90 min
   • defineProps with generic types
   • withDefaults macro
   • defineEmits type syntax
   • typed ref generics
3. Typing the Composition API90 min
   • computed property return types
   • reactive object typing
   • template ref element types
   • provide/inject typing
4. Typing API responses90 min
   • DTO interfaces
   • Axios generic response typing
   • type guards for JSON data
   • optional response fields
5. Safer, maintainable components90 min
   • strict null checks
   • refactoring without regression
   • IDE IntelliSense optimization
   • compiler error debugging

Hands-on project: Migrate a JavaScript Vue component library to strict TypeScript, defining interfaces for complex domain models, typed props with withDefaults, and typed emits.

You can optimize bundle sizes with lazy loading, write unit and component tests with Vitest and Vue Test Utils, and deploy with Vite and Nuxt.js.

1. Async components and lazy loading90 min
   • defineAsyncComponent
   • Suspense boundaries
   • dynamic imports
   • loading fallbacks
2. Code splitting and performance90 min
   • Vite bundle analyzer
   • vendor chunk splitting
   • tree-shaking imports
   • image optimization
3. Testing with Vitest and Vue Test Utils120 min
   • Vitest test runner
   • mount vs shallowMount
   • testing props and events
   • mocking Pinia stores
4. Debugging with Vue DevTools90 min
   • inspecting component hierarchy
   • tracking reactive state trees
   • event payload inspection
   • performance timeline recording
5. Build, deploy and an introduction to Nuxt.js120 min
   • vite build command
   • server-side rendering (SSR)
   • Nuxt file-based routing
   • SEO meta tags in Nuxt

Hands-on project: Configure a Vitest test suite for Pinia stores and Vue components, implement route-level code splitting, and deploy a Nuxt.js SSR build to a production server.

You can integrate Large Language Model APIs into client applications, construct effective prompt templates, and handle streaming tokens and API costs.

1. What LLMs are and how apps use them90 min
   • autoregressive language models
   • context windows
   • tokenization basics
   • client vs server LLM calls
2. Prompt engineering for product features90 min
   • system and user prompts
   • few-shot prompting
   • few-shot examples
   • reducing hallucinations
3. Calling LLM APIs (OpenAI, Claude, Gemini)120 min
   • API key security and environment variables
   • chat completions endpoint
   • message history arrays
   • handling API rate limits
4. Streaming, tokens and cost90 min
   • Server-Sent Events (SSE)
   • ReadableStream consumption
   • token usage accounting
   • cost calculation strategies
5. Designing great AI user experiences90 min
   • typing indicator animations
   • aborting in-flight AI requests
   • markdown rendering of output
   • code block syntax highlighting

Hands-on project: Build an AI prompt playground interface in Vue that connects directly to OpenAI and Anthropic APIs, supporting temperature controls, system prompts, and token usage tracking.

You can build reactive AI interfaces in Vue featuring streaming chat assistants, Retrieval-Augmented Generation search, and structured tool calling using the Vercel AI SDK.

1. The Vercel AI SDK with Vue90 min
   • ai package installation
   • useChat composable
   • useCompletion composable
   • backend API route integration
2. Building a streaming chat and assistant UI120 min
   • message list rendering
   • auto-scrolling chat window
   • input submission handling
   • loading and error states
3. Retrieval-Augmented Generation (RAG) search120 min
   • vector embeddings concept
   • similarity search queries
   • augmenting prompt context
   • source attribution rendering
4. Generating and summarising content90 min
   • structured text generation
   • text summarization widgets
   • tone and style modifiers
   • clipboard export features
5. Tools, function calling and structured output120 min
   • tool definitions in Vercel AI SDK
   • client-side tool execution
   • JSON schema validation
   • structured UI rendering from LLM output

Hands-on project: Build a document Q&A application in Vue using the Vercel AI SDK, incorporating a chat interface with streaming responses and vector-search RAG context retrieval.

You can make a Vue app usable with a keyboard and a screen reader, and ship it in more than one language.

1. Accessibility foundations90 min
   • Semantic HTML first
   • WCAG levels
   • Automated vs manual audit
2. Keyboard and screen reader support90 min
   • Focus management
   • Focus trap in a dialog
   • ARIA roles done right
3. Testing accessibility90 min
   • axe integration
   • Testing by role
   • Screen reader walkthrough
4. Internationalisation with vue-i18n90 min
   • Externalising strings
   • Plurals and date formats
   • RTL layout

Hands-on project: Audit the capstone with axe and fix every critical violation, make the main flow keyboard operable with visible focus and correct ARIA on a custom component, then externalise all strings with vue-i18n and add a second locale including a right-to-left check.

You can engineer, test, and deploy a production-grade AI-powered Vue application featuring Pinia state, router guards, streaming chat, and RAG search.

1. Plan and design an AI-powered product90 min
   • product requirements definition
   • component architecture planning
   • state and API contract design
   • wireframe translation
2. Build the Vue frontend with Pinia and routing120 min
   • scaffolding project structure
   • configuring Vue Router and guards
   • implementing Pinia stores
   • integrating Tailwind layouts
3. Add a streaming AI assistant and RAG search120 min
   • integrating Vercel AI SDK
   • connecting vector search backend
   • rendering streaming markdown
   • managing assistant error states
4. Polish, test and deploy90 min
   • writing component unit tests
   • fixing responsive layout bugs
   • production build optimization
   • deploying to Vercel or Netlify
5. Portfolio, GitHub, mock interviews and career prep90 min
   • GitHub README and repository polish
   • frontend interview question preparation
   • live code review walkthrough
   • resume and portfolio optimization

Hands-on project: Build and deploy a full AI-powered Vue capstone application with a streaming assistant, vector search, Pinia state, and Vitest test coverage published to GitHub and live hosting.