---

name: vue-fundamentals description: Master Vue.js core concepts - Components, Reactivity, Templates, Directives, Lifecycle sasmp_version: "1.3.0" bonded_agent: 01-vue-fundamentals bond_type: PRIMARY_BOND version: "2.0.0" last_updated: "2025-01"

Vue Fundamentals Skill

Production-grade skill for mastering Vue.js core concepts and building robust component-based applications.

Purpose

Single Responsibility: Teach and validate understanding of Vue.js fundamentals including component architecture, reactivity system, template syntax, directives, and lifecycle hooks.

Parameter Schema

Copyinterface VueFundamentalsParams {
  topic: 'components' | 'reactivity' | 'templates' | 'directives' | 'lifecycle' | 'all';
  level: 'beginner' | 'intermediate' | 'advanced';
  context?: {
    current_knowledge?: string[];
    learning_goal?: string;
    time_available?: string;
  };
}

Learning Modules

Module 1: Components (Foundation)

CopyPrerequisites: HTML, CSS, JavaScript basics
Duration: 2-3 hours
Outcome: Build reusable Vue components

Module 2: Reactivity (Core)

CopyPrerequisites: Module 1
Duration: 3-4 hours
Outcome: Understand Vue's reactivity system

Module 3: Templates (Syntax)

CopyPrerequisites: Module 1
Duration: 2 hours
Outcome: Master template syntax

Module 4: Directives (Built-in & Custom)

CopyPrerequisites: Module 3
Duration: 2 hours
Outcome: Use and create directives

Module 5: Lifecycle (Hooks)

CopyPrerequisites: Modules 1-4
Duration: 2 hours
Outcome: Manage component lifecycle

Validation Checkpoints

Beginner Checkpoint

• Create SFC with props and events
• Use ref() for counter
• Apply v-if and v-for
• Handle form with v-model

Intermediate Checkpoint

• Build multi-slot component
• Use computed for derived state
• Implement watch with cleanup
• Create custom directive

Advanced Checkpoint

• Design component composition patterns
• Optimize with shallowRef
• Implement error boundaries
• Build async components

Retry Logic

Copyconst skillConfig = {
  maxAttempts: 3,
  backoffMs: [1000, 2000, 4000],
  onFailure: 'provide_hint'
}

Observability

Copytracking:
  - event: module_started
    data: [module_name, user_level]
  - event: checkpoint_passed
    data: [checkpoint_name, attempts]
  - event: skill_completed
    data: [total_time, score]

Troubleshooting

Common Issues

Debug Steps

1. Check Vue Devtools component tree
2. Verify props are passed correctly
3. Confirm reactive values have .value
4. Check lifecycle hook placement

Unit Test Template

Copyimport { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders props correctly', () => {
    const wrapper = mount(MyComponent, {
      props: { title: 'Test' }
    })
    expect(wrapper.text()).toContain('Test')
  })

  it('emits event on action', async () => {
    const wrapper = mount(MyComponent)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('action')).toBeTruthy()
  })
})

Usage

CopySkill("vue-fundamentals")

Related Skills

• vue-composition-api - Next level after fundamentals
• vue-typescript - Adding type safety
• vue-testing - Testing fundamentals

Resources

• Vue.js Tutorial
• Vue Mastery
• Vue School