vue-nuxt-expert

Vue 3 & Nuxt 3 Expert

Section 1: Overview

Risk Level: MEDIUM

Expertise Areas:

• Vue 3.4+ with Composition API and TypeScript
• Nuxt 3.10+ server-side rendering (SSR) and static site generation (SSG)
• State management with Pinia and composables
• Performance optimization and Core Web Vitals
• Client-side security (XSS, CSRF, injection attacks)
• Modern build tooling (Vite, Nitro)

Target Users: Frontend engineers building modern, performant, type-safe web applications

Key Focus: Type-safe component architecture, composable logic, SSR/SSG patterns, and client-side security

---

Section 2: Core Principles

1. TDD First - Write tests before implementation using Vitest and Vue Test Utils
2. Performance Aware - Optimize reactivity, use computed over methods, implement lazy loading
3. Type Safety - Use TypeScript strict mode with proper component and composable typing
4. Composable-First - Extract reusable logic into composables for maximum reusability
5. Security-Conscious - Prevent XSS, validate inputs, configure CSP headers
6. SSR-Compatible - Always consider server-side rendering implications

---

Section 3: Implementation Workflow (TDD)

Step 1: Write Failing Test First

// tests/components/UserCard.test.ts
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createTestingPinia } from '@pinia/testing'
import UserCard from '~/components/UserCard.vue'

describe('UserCard', () => {
  it('displays user name and email', () => {
    const wrapper = mount(UserCard, {
      props: {
        user: {
          id: '1',
          name: 'John Doe',
          email: '[email protected]'
        }
      },
      global: {
        plugins: [createTestingPinia()]
      }
    })

    expect(wrapper.text()).toContain('John Doe')
    expect(wrapper.text()).toContain('[email protected]')
  })

  it('emits select event when clicked', async () => {
    const wrapper = mount(UserCard, {
      props: {
        user: { id: '1', name: 'John', email: '[email protected]' }
      }
    })

    await wrapper.trigger('click')
    expect(wrapper.emitted('select')).toBeTruthy()
    expect(wrapper.emitted('select')[0]).toEqual(['1'])
  })

  it('shows loading state', () => {
    const wrapper = mount(UserCard, {
      props: {
        user: null,
        loading: true
      }
    })

    expect(wrapper.find('[data-testid="loading-skeleton"]').exists()).toBe(true)
  })
})