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
interface 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)
Prerequisites: HTML, CSS, JavaScript basics
Duration: 2-3 hours
Outcome: Build reusable Vue components
| Topic |
Concept |
Exercise |
| SFC Structure |
<template>, <script>, <style> |
Create first component |
| Props |
Passing data down |
Build Card component |
| Events |
$emit for child→parent |
Button with click handler |
| Slots |
Content distribution |
Layout component |
| Registration |
Local vs global |
Component organization |
Module 2: Reactivity (Core)
Prerequisites: Module 1
Duration: 3-4 hours
Outcome: Understand Vue's reactivity system
| Topic |
Concept |
Exercise |
| ref() |
Primitive reactivity |
Counter app |
| reactive() |
Object reactivity |
Form state |
| computed() |
Derived values |
Shopping cart total |
| watch() |
Side effects |
API calls on change |
| watchEffect() |
Auto-track |
Logging changes |
Module 3: Templates (Syntax)
Prerequisites: Module 1
Duration: 2 hours
Outcome: Master template syntax
| Topic |
Concept |
Exercise |
| Interpolation |
{{ }} binding |
Display data |
| v-bind |
Attribute binding |
Dynamic classes |
| v-on |
Event handling |
Form submission |
| v-model |
Two-way binding |
Input forms |
| v-if/v-show |
Conditional render |
Toggle visibility |
| v-for |
List rendering |
Todo list |
Module 4: Directives (Built-in & Custom)
Prerequisites: Module 3
Duration: 2 hours
Outcome: Use and create directives
| Topic |
Concept |
Exercise |
| v-if/else |
Conditional |
Auth display |
| v-for + key |
Iteration |
Data tables |
| v-model modifiers |
.lazy, .trim |
Form validation |
| v-on modifiers |
.prevent, .stop |
Event control |
| Custom directives |
Reusable DOM logic |
v-focus directive |
Module 5: Lifecycle (Hooks)
Prerequisites: Modules 1-4
Duration: 2 hours
Outcome: Manage component lifecycle
| Hook |
Use Case |
Example |
| onMounted |
DOM ready |
Fetch initial data |
| onUpdated |
After reactivity |
Scroll position |
| onUnmounted |
Cleanup |
Clear intervals |
| onErrorCaptured |
Error boundary |
Graceful degradation |
Validation Checkpoints
Beginner Checkpoint
Intermediate Checkpoint
Advanced Checkpoint
Retry Logic
const skillConfig = {
maxAttempts: 3,
backoffMs: [1000, 2000, 4000],
onFailure: 'provide_hint'
}
Observability
tracking:
- 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
| Issue |
Cause |
Solution |
| Component not showing |
Not registered |
Check import/registration |
| Props not reactive |
Wrong prop type |
Use correct type |
| v-for no key |
Missing :key |
Add unique key |
| Infinite loop |
watch causing watched change |
Guard the update |
Debug Steps
- Check Vue Devtools component tree
- Verify props are passed correctly
- Confirm reactive values have .value
- Check lifecycle hook placement
Unit Test Template
import { 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
Skill("vue-fundamentals")
Related Skills
vue-composition-api - Next level after fundamentalsvue-typescript - Adding type safetyvue-testing - Testing fundamentals
Resources
majiayu000