Select your current position

Pick a role and level — we'll show the growth path, skills and gap analysis.

Development path

Junior

0-2 years

Current

Responsibility: Building components. Developing Single File Components. Working with Composition API. Routing (Vue Router). Basic state management (Pinia).

Key skills:

Core Web Vitals Need
CSS-in-JS Need
Data Fetching Need
Nuxt Need
OWASP & Application Security Need
Progressive Web Apps (PWA) Need
SSR/SSG/ISR Patterns Need
State Management Need
Tailwind CSS Need
Vite & Modern Bundlers Need
Vue Core Need
Web APIs Need
Web Components Need
Algorithms & Complexity Need
Async Programming Need
Visual Regression Testing Need
Web Accessibility Need
Code Quality & Refactoring Need
Component Testing Need
Bundle Optimization Need
Design Patterns Need
Design System Development Need
Modern CSS Need
Data Structures Need
Type Safety & Type Systems Need

Middle

2-5 years

Next

Responsibility: Designing component architecture. Composables for logic reuse. API integration (Axios/fetch). SSR with Nuxt. Testing (Vitest).

Key skills:

Core Web Vitals Need
CSS-in-JS Need
Data Fetching Need
Nuxt Need
OWASP & Application Security Need
Progressive Web Apps (PWA) Need
SSR/SSG/ISR Patterns Need
State Management Need
Tailwind CSS Need
Vite & Modern Bundlers Need
Vue Core Need
Web APIs Need
Web Components Need
Algorithms & Complexity Need
Async Programming Need
Visual Regression Testing Need
Web Accessibility Need
Code Quality & Refactoring Need
Component Testing Need
Micro Frontends Need
Bundle Optimization Need
Design Patterns Need
Design System Development Need
Modern CSS Need
Data Structures Need
Type Safety & Type Systems Need

Senior

5-8 years

Responsibility: Vue application architecture. Nuxt modules and plugins. Performance optimization. UI Kit design. TypeScript in Vue ecosystem.

Key skills:

ChatGPT / Claude Need
Code Review Need
Core Web Vitals Need
CSS-in-JS Need
Data Fetching Need
Docker Need
E2E Testing Need
Git Advanced Need
GitHub Actions / GitLab CI Need
GitHub Copilot Need
GraphQL Design Need
Nuxt Need
OWASP & Application Security Need
Performance Budgets Need
Progressive Web Apps (PWA) Need
REST API Design Need
SSR/SSG/ISR Patterns Need
State Management Need
Tailwind CSS Need
Unit Testing Need
Vite & Modern Bundlers Need
Vue Core Need
Web APIs Need
Web Components Need
Algorithms & Complexity Need
Async Programming Need
Visual Regression Testing Need
Web Accessibility Need
Code Quality & Refactoring Need
Component Testing Need
Micro Frontends Need
Bundle Optimization Need
Design Patterns Need
Design System Development Need
Modern CSS Need
Data Structures Need
Accessibility Testing Need
Type Safety & Type Systems Need

Lead / Staff

7-12 years

Responsibility: Frontend platform on Vue/Nuxt. Development standards. Design system. Backend coordination. Migration strategy (Vue 2 → 3).

Key skills:

ChatGPT / Claude Need
Code Review Need
Core Web Vitals Need
CSS-in-JS Need
Data Fetching Need
Docker Need
E2E Testing Need
Git Advanced Need
GitHub Actions / GitLab CI Need
GitHub Copilot Need
GraphQL Design Need
Nuxt Need
Performance Budgets Need
Progressive Web Apps (PWA) Need
REST API Design Need
SSR/SSG/ISR Patterns Need
State Management Need
Tailwind CSS Need
Unit Testing Need
Vite & Modern Bundlers Need
Vue Core Need
Web APIs Need
Web Components Need
Algorithms & Complexity Need
Async Programming Need
Visual Regression Testing Need
Web Accessibility Need
Code Quality & Refactoring Need
Component Testing Need
Micro Frontends Need
Bundle Optimization Need
Design Patterns Need
Design System Development Need
Modern CSS Need
Data Structures Need
Accessibility Testing Need
Type Safety & Type Systems Need

Principal

10+ years

Responsibility: Frontend strategy. Choosing between Vue/React/Angular. Scalable frontend architecture. Vue ecosystem contributions.

Key skills:

ChatGPT / Claude Need
Code Review Need
Core Web Vitals Need
CSS-in-JS Need
Data Fetching Need
Docker Need
E2E Testing Need
Git Advanced Need
GitHub Actions / GitLab CI Need
GitHub Copilot Need
GraphQL Design Need
Nuxt Need
Performance Budgets Need
Progressive Web Apps (PWA) Need
REST API Design Need
SSR/SSG/ISR Patterns Need
State Management Need
Tailwind CSS Need
Unit Testing Need
Vite & Modern Bundlers Need
Vue Core Need
Web APIs Need
Web Components Need
Algorithms & Complexity Need
Async Programming Need
Visual Regression Testing Need
Web Accessibility Need
Code Quality & Refactoring Need
Component Testing Need
Bundle Optimization Need
Design Patterns Need
Design System Development Need
Modern CSS Need
Data Structures Need
Accessibility Testing Need
Type Safety & Type Systems Need

Gap analysis: skills to develop

To reach the next level you'll need to develop:

Core Web Vitals

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.

CSS-in-JS

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.

Data Fetching

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.

Nuxt

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

OWASP & Application Security

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.

Progressive Web Apps (PWA)

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.

SSR/SSG/ISR Patterns

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.

State Management

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

Tailwind CSS

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.

Vite & Modern Bundlers

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.

Vue Core

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

Web APIs

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

Web Components

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.

Algorithms & Complexity

Optimizes filtering and sorting algorithms in Pinia store computed properties. Applies memoization and caching in VueUse composables to prevent unnecessary computations when reactive state updates.

Async Programming

Implements complex async flows with useAsyncState and useFetch from VueUse. Manages race conditions in watchers through watchEffect with cleanup functions, organizes parallel data loading in Nuxt 3 middleware.

Visual Regression Testing

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.

Web Accessibility

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.

Code Quality & Refactoring

Configures strict ESLint rules for Vue 3 — vue/recommended, TypeScript strict mode, auto-fix through Vite plugin. Introduces Husky + lint-staged for pre-commit checks, writes reusable composables with JSDoc.

Component Testing

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.

Micro Frontends

Works with micro-frontends in Vue: uses vite-plugin-federation for Module Federation, implements Vue components as Web Components for framework-agnostic integration, configures shared Pinia store between micro-frontends. Manages shared CSS through CSS Modules isolation.

Bundle Optimization

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.

Design Patterns

Implements Renderless Components, Compound Components and Headless UI patterns in Vue 3. Designs reusable composables with inversion of control, applies Strategy and Observer through Vue reactivity system.

Design System Development

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.

Modern CSS

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.

Data Structures

Designs normalized data structures in Pinia stores for efficient UI updates. Uses Map and Set in composables, understands Vue 3 reactive proxy behavior with different collection types.

Type Safety & Type Systems

Creates strictly typed composables and Pinia stores with generics. Configures TypeScript strict mode for Vue project, types provide/inject, route params in Nuxt 3 and API responses through Zod validation.