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
Responsibility: Building components. Developing Single File Components. Working with Composition API. Routing (Vue Router). Basic state management (Pinia).
Key skills:
Middle
2-5 years
Responsibility: Designing component architecture. Composables for logic reuse. API integration (Axios/fetch). SSR with Nuxt. Testing (Vitest).
Key skills:
Senior
5-8 years
Responsibility: Vue application architecture. Nuxt modules and plugins. Performance optimization. UI Kit design. TypeScript in Vue ecosystem.
Key skills:
Lead / Staff
7-12 years
Responsibility: Frontend platform on Vue/Nuxt. Development standards. Design system. Backend coordination. Migration strategy (Vue 2 → 3).
Key skills:
Principal
10+ years
Responsibility: Frontend strategy. Choosing between Vue/React/Angular. Scalable frontend architecture. Vue ecosystem contributions.
Key skills:
Gap analysis: skills to develop
To reach the next level you'll need to develop:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.