vue-frontend

Vue.js Frontend Development Skill

Level 1: Quick Reference (~700-900 tokens)

Core Concepts

Composition API vs Options API

// Composition API (recommended for new projects)
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

// Options API (traditional)
export default {
  data() { return { count: 0 }; },
  computed: { doubled() { return this.count * 2; } }
};

Reactivity Fundamentals

// ref - for primitives and single values
const count = ref(0);
count.value++; // access with .value

// reactive - for objects
const state = reactive({ count: 0, name: 'Vue' });
state.count++; // direct access

// computed - derived state
const doubled = computed(() => count.value * 2);

// watch - side effects
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

Component Communication

// Props (parent → child)
defineProps<{ message: string }>();

// Emits (child → parent)
const emit = defineEmits<{ submit: [data: FormData] }>();
emit('submit', formData);

// Provide/Inject (ancestor → descendant)
// Parent
provide('theme', ref('dark'));
// Child
const theme = inject<Ref<string>>('theme');

Essential Checklist

Setup & Configuration

• Vue 3 with Vite or Vue CLI
• TypeScript integration
• ESLint + Prettier configured
• Vue Router installed
• Pinia for state management
• Vitest + Vue Test Utils for testing

Component Development

• Use Composition API with <script setup>
• Define props with TypeScript types
• Emit typed events
• Implement proper lifecycle hooks
• Use composables for reusable logic

Routing & Navigation

• Define routes with lazy loading
• Implement route guards (auth, permissions)
• Handle 404 and error pages
• Use typed router with generics

State Management

• Define Pinia stores with TypeScript
• Use composition stores for complex logic
• Implement persistence for user preferences
• Handle async actions properly