frontend-vue-development_skill

Overview

This skill provides a concise frontend Vue development guideline for building consistent, maintainable Vue 2/3 applications. It covers component structure, Vuex state management, routing, component communication, styling conventions, and internationalization tips. Use it to standardize code style, API patterns, and component architecture across projects.

How this skill works

The skill defines naming conventions, ESLint rules, component option order, props patterns, and API call practices that developers should follow. It describes how to integrate Vuex actions, mapActions usage, router considerations, and recommended patterns for async requests and error handling. It also lists a checklist to validate files, props, and style scope before shipping a component.

When to use it

• When creating new Vue components or refactoring existing ones
• When implementing or consuming Vuex stores and async actions
• When wiring routes and guarded navigation in Vue Router
• When integrating with backend APIs using the project ajax wrapper
• When enforcing team coding standards and linting rules

Best practices

• Name component files in kebab-case and use scoped styles to avoid leakage
• Follow component option order: components, mixins, props, data, computed, watch, lifecycle, methods
• Define Props with type and default; use factory functions for objects/arrays
• Use 4-space indentation, no semicolons, no trailing commas, and double quotes in templates
• Avoid v-html to prevent XSS; handle API errors and set loading flags reliably
• Prefer mapActions for Vuex async calls and return promises from store actions

Example use cases

• Build a table component that fetches data via this.$ajax and shows bk-table with v-loading
• Implement a Vuex action to fetch a project pipeline list and call it from a component using mapActions
• Refactor a component to follow the option order and add prop type/defaults with factory functions
• Create route-level guards that rely on Vuex state for permission checks
• Standardize API error handling to map 403/404 codes to UI error states