Optimizes Vue application Core Web Vitals — code splitting through dynamic import(), LCP optimization with Nuxt Image, CLS elimination through skeleton screens and aspect-ratio for media content.

Implements complex Vue components using CSS-in-JS libraries (e.g., vue-styled-components) or scoped styles with dynamic bindings. Optimizes rendering by minimizing style recalculations in reactive contexts. Applies proper patterns for theme switching and state-driven styling in Vue SFCs.

Implements efficient data loading — caching through useFetch with keys, parallel requests, deduplication. Configures interceptors through ofetch, implements optimistic updates in Pinia stores with rollback on errors.

Independently implements complex UI components with Nuxt. Optimizes rendering performance. Writes tests. Applies state management tools.

Implements Vue application protection against OWASP Top 10 — CSP headers in Nuxt, user input sanitization, secure cookie configuration. Configures Nuxt Security module, conducts dependency audit through npm audit.

Configures PWA for Vue/Nuxt — Workbox caching strategies, push notifications, background sync. Implements offline-first approach with Pinia stores and IndexedDB, configures @vite-pwa/nuxt for Nuxt 3.

Implements hybrid rendering in Nuxt 3 — ISR through routeRules, SWR caching, prerendering static pages. Solves hydration mismatch issues, configures client-only and server-only components.

Designs Pinia store structure — modular organization, composable stores, plugins for persistence and devtools. Uses VueUse composables for global state — useStorage, useBreakpoints, createSharedComposable.

Creates custom design system on Tailwind for Vue project — custom theme, plugins, Headless UI components. Optimizes PurgeCSS configuration for Vite, uses @tailwindcss/typography and animations.

Configures Vite for Vue project — plugins (unplugin-auto-import, unplugin-vue-components), API proxy, dep pre-bundling optimization. Configures Vitest through vite.config, sets up SSR mode for Nuxt.

Independently implements complex UI components with Vue Core. Optimizes rendering performance. Writes tests. Applies state management tools.

Implements Web API integration through custom composables — WebSocket, Geolocation, Notifications, Clipboard API. Uses VueUse as reference for patterns, handles permissions and fallbacks correctly.

Creates Web Components from Vue components through defineCustomElement for integration with other frameworks. Configures Vite for building component library as Web Components with correct styling and event handling.

Configures visual regression tests for Vue components through Playwright and Percy/Chromatic. Integrates with Storybook — automated screenshot tests for each story, configures threshold and viewport breakpoints.

Implements accessible Vue components: creates keyboard-navigable components with v-on:keydown, manages focus through template refs, implements accessible form validation with aria-describedby and aria-invalid. Uses Headless UI or Radix Vue for accessible primitives.

Creates comprehensive component tests — mocking Pinia stores, Vue Router, API calls through MSW. Tests composables in isolation, uses Vitest snapshot tests and custom matchers for Vue-specific checks.

Optimizes Vue application bundle — configuring Vite rollupOptions for chunk splitting, manualChunks for vendor libraries. Configures code splitting by Nuxt 3 routes, optimizes Pinia store size through tree shaking.

Creates Vue component library with unified API — slots, expose, v-model customization. Documents components in Storybook with Histoire, writes component tests through Vitest and Vue Test Utils.

Creates responsive layouts with Container Queries and CSS Grid in Vue components. Implements animations through CSS Transitions and Vue Transition/TransitionGroup, uses :deep() and :slotted() selectors.