Vue2

What it does

This skill provides a comprehensive development guide for Vue 2.x, covering core concepts and best practices. It assists in generating code snippets related to Options API usage, component creation, reactive data management, computed properties & watchers, and routing. The goal is to streamline Vue 2 development by offering pre-built examples and accelerating project setup.

When to use it

• When you need help structuring a Vue 2 component using the Options API.
• To understand how to manage reactive data within a Vue 2 application.
• For guidance on creating custom components with props, emits, and communication methods.
• When setting up routing or state management (Vuex) in your Vue 2 project.

Key capabilities

• Options API: Provides examples of component structure using the Options API.
• Reactive Data Management: Demonstrates how to define and manage reactive data with data(). Includes notes on adding new properties and modifying arrays.
• Computed Properties & Watchers: Shows how to create computed properties for derived data and watchers for tracking changes in data.
• Component Development: Provides examples of component definition, including props, emits, and methods.
• Component Communication: Explains various communication techniques between components (Props, $emit, $parent/$children, $refs, Vuex, EventBus).

Example prompts

• "Show me an example of a Vue 2 component using the Options API with reactive data."
• "How do I create a computed property in Vue 2?"
• "Give me an example of how to pass data from a parent component to a child component in Vue 2."

Tips & gotchas

• This skill focuses on Vue 2.x and may not be applicable to newer versions like Vue 3.
• When adding new properties to reactive data, use this.$set or Vue.set.